{% extends 'teamer/layout.html.twig' %}

{% block title %}Meine Verfügbarkeit{% endblock %}

{% block content %}
    <h1 class="text-2xl font-bold pb-4">
        Meine Verfügbarkeit
    </h1>
    <p class="pb-8">
        Hier kannst du angeben, wann du allgemein Zeit und Lust hättest, Einsätze zu absolvieren. Wenn wir in diesem
        Zeitraum einen Einsatz zu vergeben haben, dann nehmen wir telefonisch oder per E-Mail Kontakt zu dir auf.
    </p>

    <h2 class="text-xl font-bold pb-2">
        Ich bin verfügbar
    </h2>
    <div class="grid md:grid-cols-2 gap-8 pb-8">
        {% for year, months in selectedAvailabilities %}
            <div>
                <h3 class="text-lg font-bold">
                    {{ year }}
                </h3>
                <div class="flex flex-col space-y-3">
                    {% for month, availabilities in months %}
                        <div>
                            <h4 class="font-bold">
                                {{ month }}
                            </h4>
                            {% for availability in availabilities %}
                                <div class="flex items-center space-x-2">
                                    <span>{{ availability }}{% if availability.description %} ({{ availability.description }}){% endif %}</span>
                                    {% if is_granted('DELETE', availability) %}
                                        <button type="button"
                                                title="Zeitraum entfernen/löschen"
                                                hx-get="{{ path('app_teamer_profile_availability_delete', { 'id': availability.id }) }}"
                                                hx-target="body"
                                                hx-swap="beforeend">
                                            {{ icon('delete', 'w-5 h-5') }}
                                        </button>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% else %}
            <div class="md:col-span-2 text-sm">
                Du hast bisher keine Verfügbarkeiten hinterlegt.
            </div>
        {% endfor %}
    </div>
    <h2 class="text-xl font-bold pb-2">
        Weitere Verfügbarkeiten
    </h2>
    <div class="grid md:grid-cols-2 gap-8 pb-8">
        {% for year, months in selectableAvailabilities %}
            <div>
                <h3 class="text-lg font-bold">
                    {{ year }}
                </h3>
                <div class="flex flex-col space-y-3">
                    {% for month, availabilities in months %}
                        <div>
                            <h4 class="font-bold">
                                {{ month }}
                            </h4>
                            {% for availability in availabilities %}
                                <div class="flex items-center space-x-2">
                                    <span>{{ availability }}{% if availability.description %} ({{ availability.description }}){% endif %}</span>
                                    <a href="{{ path('app_teamer_profile_availability_add', { 'id': availability.id }) }}"
                                       title="Zeitraum hinzufügen">
                                        {{ icon('plus', 'w-5 h-5') }}
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% else %}
            <div class="md:col-span-2 text-sm">
                Es sind keine weiteren Zeiträume verfügbar.
            </div>
        {% endfor %}
    </div>
    <button type="button"
            class="btn"
            title="Eigenen Zeitraum hinzufügen"
            hx-get="{{ path('app_teamer_profile_availability_create') }}"
            hx-target="body"
            hx-swap="beforeend">
        Eigenen Zeitraum hinzufügen
    </button>
{% endblock %}