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

{% block list %}

    {% component 'Admin:SearchableQueryableList' with {
        qb,
        ms,
        participant,
        filterType: filterType,
        searchable: searchable|default([]),
        routeName: app.current_route,
        routeParameters: app.current_route_parameters|merge(app.request.query.all),
        sorting: "edition",
        config: {
            showUrl: '{{ path("admin_attendance_show", { uuid: item.uuid.toBase58 }) }}',
            squeezedColumns: [
                'fee',
                'status',
                'paid',
            ],
            title: '{{ item.offer.name|default("") }}',
            info: [
                '{{ item.offer.edition.name|default("") }}',
                '
 
{% if item.offer.dates is not empty %}
    {{ component("Cms:OfferDate", { dates: item.offer.dates, short: true }) }}
{% else %}
  Dauerangebot
{% endif %}
',
                '{{ ("status."~item.status)|trans }}',
            ],
            aside: '
<div class="flex items-center space-x-2 shrink-0">
{% set fee = item.offer.getFeePayable(item.participant, dispatcher) %}
{% if fee == item.offer.fee %}
        <span class="text-teal-700 dark:text-teal-400 font-semibold leading-6">{{ (fee/100)|format_currency("EUR", locale="de") }}</span>
{% else %}
        <del class="inline line-through text-gray-500 text-xs">{{ (item.offer.fee/100)|format_currency("EUR", locale="de") }}</del>
        <span class="text-teal-700 dark:text-teal-400 font-semibold leading-6">{{ (fee/100)|format_currency("EUR", locale="de") }}</span>
{% endif %}
</div>
',
            groupBy: '{{ item.offer.edition.name|default("") }}',
            columns: {
                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.stash %}
              {{ ux_icon(\'ph:tray\', { class: \'inline-block w-4 h-4 ml-1 -mt-1 text-gray-500\' }) }}
            {% endif %}
            {% if item.offer.cancelled|default(false) %}
                {{ component("Admin:Badge", { color: "red", size: "sm", content: "abgesagt" }) }}
            {% endif %}
        </span>
        <span class=" text-gray-500 dark:text-gray-400 font-normal">
             
            {% if item.offer.dates is not empty %}
              {{ component("Cms:OfferDate", { dates: item.offer.dates, short: true }) }}
            {% else %}
              Dauerangebot
            {% endif %}
        </span>
    </span>
</a>
',
                fee: '
{% set fee = item.offer.getFeePayable(item.participant, dispatcher) %}
{% if fee == item.offer.fee %}
        {{ (fee/100)|format_currency("EUR", locale="de") }}
{% else %}
        <del class="inline line-through">{{ (item.offer.fee/100)|format_currency("EUR", locale="de") }}</del>
        <span>{{ (fee/100)|format_currency("EUR", locale="de") }}</span>
{% endif %}
',
                status: '
<a href="{{ path("admin_participants_attendances_status", { ids: [item.id] }) }}" 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", class: "-ml-2" }) }}
</a>
',
                paid: '
<a href="{{ path("admin_participants_attendances_payments", { uuid: item.uuid.toBase58 }) }}" 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">
{% if item.paid %}
    {{ component("Admin:Badge", { color: "green", size: "sm", class: "-ml-2", content: "bezahlt" }) }}
{% elseif item.stash %}
    {{ component("Admin:Badge", { color: "gray", size: "sm", class: "-ml-2", content: "unbestätigt" }) }}
{% elseif item.payable %}
    {{ component("Admin:Badge", { color: "red", size: "sm", class: "-ml-2", content: "unbezahlt" }) }}
{% else %}
    {{ component("Admin:Badge", { color: "gray", size: "sm", class: "-ml-2", content: "keine Zahllast" }) }}
{% endif %}
</a>
'
            }
        }
    } %}
        {% block page_header %}
            <div class="sm:flex sm:justify-between py-4">
                <twig:Admin:Participant:Header participant="{{ this.participant }}"/>

                <div class="mt-4 sm:mt-0 flex items-center space-x-3 sm:justify-end">
                    <twig:Admin:Button href="{{ path('admin_attendances_create', { participant: this.participant.uuid }) }}" data-turbo-frame="slideover">Neue Anmeldung</twig:Admin:Button>
                </div>
            </div>
        {% endblock %}
    {% endcomponent %}

{% endblock %}
