{% extends "@FerienpassAdmin/layout/modalBase.html.twig" %}

{% trans_default_domain 'admin' %}
{% set translationPrefix = app.request.get('_route')|split('_')[1] %}

{% block main %}
    <div>
        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
            id="modal-headline">Terminvarianten</h3>
        <p class="text-sm text-gray-700 dark:text-gray-200">
            Verwalten Sie hier die verschiedenen Termine eines Angebotes.
        </p>
    </div>

    <div class="mt-4">
        {% if variants is not empty %}
            <strong class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ item.name }}</strong>
            <div class="mt-2 flex overflow-x-auto space-x-2">
                {% for variant in variants %}
                    <div class="border-2 {{ variant.id == item.id ? 'border-solid border-primary-600' : 'border-dashed  border-gray-300 dark:border-gray-700 hover:border-primary-500' }} rounded-lg px-3 py-2 group relative">
                        <p class="text-sm font-semibold {{ variant.id == item.id ? 'text-primary-600' : 'dark:text-white group-hover:text-primary-600' }}">
                            {% set startDate = variant.dates|first.begin %}
                            {% if startDate %}
                                {{ startDate|format_datetime(pattern="E, dd.MM.yyyy HH:mm") }}
                            {% else %}
                                <span class="inline-flex items-center text-orange-600">
                                    {{ ux_icon('ph:warning', {class: 'mr-1 size-4'}) }}
                                    <span>Termin fehlt</span>
                                </span>
                            {% endif %}
                        </p>
                        <a class="absolute inset-0 -indent-[99999px]"
                           href="{{ path('admin_offers_variants', { uuid: variant.uuid.toBase58 }) }}"></a>
                    </div>
                {% endfor %}
            </div>

            {% if detach is not null %}
                <div class="mt-4">
                    <h4 class="font-medium text-gray-900 dark:text-gray-100">Verknüpfung aufheben</h4>
                    <p class="text-sm text-gray-700 dark:text-gray-200">Wenn Sie nicht wollen, dass dieser Termin
                        {% set startDate = item.dates|first.begin %}
                        {% if startDate %}
                            ({{ startDate|format_datetime(pattern="dd.MM.yyyy HH:mm") }})
                        {% else %}
                            (<span class="inline-flex items-center text-orange-600">
                                {{ ux_icon('ph:warning', {class: 'mr-1 size-4'}) }}
                                <span>Termin fehlt</span>
                            </span>)
                        {% endif %}
                        mit dem Angebot
                        verknüpft
                        ist, können Sie die Verknüpfung aufheben.</p>
                    {{ form_start(detach) }}
                    <twig:Admin:Button variant="destructive" type="submit" class="mt-2">Termin vom Angebot loslösen</twig:Admin:Button>
                    {{ form_end(detach) }}
                </div>
            {% endif %}

            {% if link is not null %}
                <div class="mt-6">
                    <h4 class="font-medium text-gray-900 dark:text-gray-100">Terminvariante erstellen</h4>
                    <p class="text-sm text-gray-700 dark:text-gray-200">Wenn dieser Termin nur ein alternativer Termin
                        eines anderen Angebotes ist, dann machen Sie diesen Termin zu einer Terminvariante. <strong>Achtung:</strong>
                        Alle Angebotsdetails außer das Datum werden überschrieben.</p>
                    {{ form_start(link) }}

                    <div class="mt-4">
                        {{ form_row(link.base) }}
                    </div>

                    <twig:Admin:Button variant="primary" type="submit" class="mt-2">Angebot verknüpfen</twig:Admin:Button>
                    {{ form_end(link) }}
                </div>
            {% endif %}

        {% endif %}
    </div>

{% endblock %}
