{% trans_default_domain 'admin' %}
 

<div {{ attributes }}>

    <div class="flex items-center space-x-4 mb-6">
        <h1 class="text-gray-900 dark:text-gray-50 tracking-tight shrink text-xl font-bold truncate">
            {{ 'commitAttendances.title'|trans }}
        </h1>
        {% if this.stashes|length %}
            <div class="h-6 w-px bg-gray-300 dark:bg-gray-700"></div>
            <nav class="flex space-x-4 overflow-x-auto py-1">
                {% for s in this.stashes %}
                    <a href="#"
                       class="text-sm font-medium whitespace-nowrap {{ stash and s.id == stash.id ? 'text-primary-600 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300' }}"
                       data-action="live#action:prevent"
                       data-live-action-param="selectStash"
                       data-live-id-param="{{ s.id }}"
                       {% if stash and s.id == stash.id %}aria-current="page"{% endif %}>
                        Stapel {{ s.id }} {{ s.name ? '(' ~ s.name ~ ')' : '' }}
                        <span class="ml-1 hidden rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-900 md:inline-block dark:bg-white/10 dark:text-gray-300">
                            {{ s.attendances|length }}
                        </span>
                    </a>
                {% endfor %}
            </nav>
        {% endif %}
    </div>

    <div class="mt-10" id="notify-container">
        {% set qb = this.queryBuilder %}
        {% set hasItems = qb.getQuery().getResult() is not empty %}

        {% if not hasItems %}
            <twig:Admin:Alert type="confirm"
                              class="shadow border border-green-700/30 dark:border-green-400/30"
                              message="Alle Teilnehmer:innen wurden bereits über Ihre Teilnahme informiert. Das ist sehr gut!"/>

        {% else %}

                <div class="lg:max-w-3xl text-gray-500 dark:text-gray-400 text-sm mt-1">
                    <p>So wurde entschieden. Wenn alles passt, können Sie die Zulosung festschreiben und die
                        Teilnehmenden informieren.</p>
                    <p class="mt-2"><span class="font-semibold">Es müssen zweifelsfrei alle Anmeldungen festgeschrieben werden</span>, die hier erscheinen, unabhängig davon, ob Sie die Teilnehmenden über eine Änderung am Teilnahmestatus informieren wollen oder nicht. Sie können Teilnehmende in einen anderen Stapel verschieben und diesen gesondert festschreiben, sollten Sie Teile nicht informieren wollen.</p>
                </div>

            <div class="my-8">
                {{ component('Admin:SearchableQueryableList', {
                    qb: qb,
                    ms: this.ms,
                    searchable: ['p.firstname', 'p.lastname', 'o.name'],
                    routeName: app.current_route,
                    routeParameters: app.current_route_parameters|merge(app.request.query.all),
                    sorting: 'e.name',
                    config: {
                        groupBy: '{{ item.offer.edition.name }}',
                        columns: {
                            participant: '
<a href="{{ path("admin_participants_show", { uuid: item.participant.uuid.toBase58 }) }}" data-turbo-frame="slideover" class="hover:bg-gray-200/75 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1.5 py-1 -mx-1.5 -my-1 transition-colors font-medium text-gray-900 dark:text-gray-100">
    {{ item.participant.name }}
</a>
',
                            offer: '
<a href="{{ path("admin_offers_show", { uuid: item.offer.uuid.toBase58 }) }}" class="group" data-turbo-frame="slideover">
    <span class="flex flex-col">
        <span class="flex items-center space-x-2">
            <span class="{{ item.offer.cancelled|default(false) ? "line-through" : "" }} group-hover:bg-gray-100 dark:group-hover:bg-gray-900/50 group-hover:text-gray-900 dark:group-hover:text-gray-100 rounded-md px-1.5 py-1 -mx-1.5 -my-1 transition-colors font-medium text-gray-900 dark:text-gray-100">{{ item.offer.name|default("") }}</span>
            {% if item.offer.cancelled|default(false) %}
                {{ component("Admin:Badge", { color: "red", size: "sm", content: "abgesagt" }) }}
            {% endif %}
        </span>
        <span class="text-xs text-gray-500 dark:text-gray-400">
             
            {% if item.offer.dates is not empty %}
             {{ component("Cms:OfferDate", { dates: item.offer.dates, short: true }) }}
            {% else %}
              Dauerangebot
            {% endif %}
        </span>
    </span>
</a>
',
                            status: '
<a href="{{ path("admin_participants_attendances_status", { ids: [item.id], stashed: 1 }) }}" data-turbo-frame="slideover" class="hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors">
    {{ component("Admin:Badge", { attendance: item.status, size: "sm" }) }}
</a>
'
                        }
                    }
                }) }}
            </div>

            <div class="my-8 relative flex items-start">
                <div class="flex h-6 items-center">
                    <input id="notify"
                           data-model="notify"
                           aria-describedby="notify-description"
                           type="checkbox"
                           class="h-4 w-4 rounded border-gray-300 dark:border-white/10 dark:bg-white/5 text-primary-600 focus:ring-primary-600">
                </div>
                <div class="ml-3 text-sm leading-6">
                    <label for="notify" class="font-medium text-gray-900 dark:text-gray-100">Zulassungsbescheide
                        versenden:</label>
                    <span id="notify-description" class="text-gray-500 dark:text-gray-400">Die Zu- und Absagen
                            werden per E-Mail versendet.</span>
                </div>
            </div>

            <div class="bg-white dark:bg-white/5 shadow dark:shadow-none ring-1 ring-gray-900/5 dark:ring-white/10 sm:rounded-lg max-w-2xl my-8">
                <div class="px-4 py-5 sm:p-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                        Ready, steady, go!
                    </h3>
                    <div class="mt-2 max-w-xl text-sm leading-5 text-gray-500 dark:text-gray-400">
                        {% if notify %}
                            <p>Wir verschicken die Benachrichtigungen per E-Mail. Bereit, wenn Sie es
                                sind!</p>
                        {% else %}
                            <p>Die Zulosung wird festgeschrieben. Es werden aber keine E-Mails versendet.</p>
                        {% endif %}
                    </div>
                    <div class="mt-5">
                            <span class="inline-flex rounded-md shadow-sm">
                                <a href="{{ path('admin_commit_attendances_confirm', { stash: stash.id, notify: notify ? 1 : 0 }) }}"
                                   data-turbo-frame="modal"
                                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-primary-600 hover:bg-primary-500 focus:outline-none focus:border-primary-700 focus:shadow-outline-primary active:bg-primary-700 transition ease-in-out duration-150">
                                    {{ notify ? 'Benachrichtigungen verschicken' : 'Zulosung festschreiben' }}
                                </a>
                            </span>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>


</div>
