{% extends "@FerienpassAdmin/layout/base.html.twig" %}
{% trans_default_domain 'admin' %}


{% block main %}

    <div>
        <div class="mb-8">
            <twig:Admin:Offer:Header offer="{{ offer }}" detailed="{{ true }}"/>
        </div>

        <div class="mb-8 flex items-center gap-x-4 justify-end">
            <div>
                {{ form_start(toggleMode) }}

                {% do toggleMode.auto.setRendered %}

                <div class="flex items-center space-x-3"
                     x-data="{ enabled: {{ autoCommit ? 'true' : 'false' }} }"
                     x-init="$watch('enabled', v => $nextTick(() => { $el.closest('form').submit() }) )">
                    <input type="hidden" name="{{ toggleMode.auto.vars.full_name }}" :value="enabled ? '1' : ''">

                    <button type="button"
                            class="bg-gray-200 dark:bg-gray-700 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
                            :class="{ 'bg-green-700 dark:bg-green-600': enabled, 'bg-gray-200 dark:bg-gray-700': !enabled }"
                            @click.prevent='enabled = !enabled'
                            role="switch" aria-checked="false" aria-labelledby="mode-label">
                        <span aria-hidden="true"
                              class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
                              :class="{ 'translate-x-5': enabled, 'translate-x-0': !enabled }"
                        ></span>
                    </button>

                    <div class="flex items-center gap-x-2" id="mode-label">
                        <div class="flex flex-col">
                            <span>
                                <span class="text-sm font-medium text-gray-900 dark:text-gray-100"
                                      x-text='enabled ? {{ "offers.assign.commit_changes"|trans({}, "admin")|json_encode|raw }} : {{ "offers.assign.do_not_commit_changes"|trans({}, "admin")|json_encode|raw }}'></span>
                                <span x-show="enabled" class="text-gray-500 dark:text-gray-400 text-sm">{{ 'offers.assign.notify_participants'|trans({}, 'admin') }}</span>
                            </span>
                        </div>
                        <div x-data="{ open: false }" class="relative flex items-center">
                            <button type="button" @mouseenter="open = true" @mouseleave="open = false"
                                    @click="open = !open"
                                    class="text-gray-400 hover:text-gray-500 focus:outline-none">
                                <twig:ux:icon name="ph:info" class="size-5" />
                            </button>
                            <div x-show="open" x-cloak
                                 x-transition
                                 class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max max-w-64 p-2 bg-gray-900 text-white text-xs rounded shadow-lg z-50">
                                <p x-text='enabled ? {{ "offers.assign.help_commit"|trans({}, "admin")|json_encode|raw }} : {{ "offers.assign.help_do_not_commit"|trans({}, "admin")|json_encode|raw }}'></p>
                            </div>
                        </div>
                    </div>
                </div>

                {{ form_end(toggleMode) }}
            </div>

            {% if is_granted('participants.add', offer) %}
                <twig:Admin:Button variant="secondary" href="{{ path('admin_offers_transfer_participants', { uuid: offer.uuid.toBase58 }) }}" data-turbo-frame="slideover">{{ 'offers.action.transfer_participants'|trans({}, 'admin') }}</twig:Admin:Button>
                <twig:Admin:Button href="{{ path('admin_attendances_create', { offer: offer.uuid }) }}" data-turbo-frame="slideover">{{ 'attendances.new'|trans({}, 'admin') }}</twig:Admin:Button>
            {% endif %}

        </div>

        {% if autoCommit %}
            <div class="mb-10">
                <twig:Admin:Alert type="warning" class="shadow border border-yellow-700/30">
                    <strong>{{ 'offers.assign.auto_commit_warning'|trans({}, 'admin') }}</strong> {{ 'offers.assign.auto_commit_description'|trans({}, 'admin') }}
                </twig:Admin:Alert>
            </div>
        {% endif %}

        <twig:Admin:OfferAssign offer="{{ offer }}" autoCommit="{{ autoCommit }}"/>

    </div>

{% endblock %}
