{% trans_default_domain 'admin' %}

<h2 class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">{{ headline|trans }}
    {% if payment.receiptNumber %}
        <span class="font-normal">{{ '#'~ payment.receiptNumber }}</span>
    {% endif %}
</h2>

<dl class="text-sm leading-6">
    <div class="sm:pr-4">
        <dt class="inline text-gray-500 dark:text-gray-400">Beleg vom</dt>
        <dd class="inline text-gray-700 dark:text-gray-300">
            <time datetime="{{ payment.createdAt|date('c') }}">{{ payment.createdAt|date('d.m.Y') }}</time>
        </dd>
    </div>
    {% if payment.billingAddress %}
        <div class="mt-8 sm:mt-6 sm:border-t sm:border-gray-900/5 dark:sm:border-white/10 sm:pt-6">
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Empfänger</dt>
            <dd class="mt-2 text-gray-500 dark:text-gray-400">{{ payment.billingAddress|nl2br }}
            </dd>
        </div>
    {% endif %}
</dl>
<table class="mt-16 w-full whitespace-nowrap text-left text-sm leading-6">
    <thead class="border-b border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100">
    <tr>
        <th scope="col" class="px-0 py-3 font-semibold">Angebot</th>
        <th scope="col" class="py-3 pl-8 pr-0 text-right font-semibold">Teilnahmegebühr</th>
    </tr>
    </thead>
    <tbody>
    {% for item in payment.items %}
        <tr class="border-b border-gray-100 dark:border-gray-800">
            <td class="max-w-0 w-full px-0 py-5 align-top">
                <div class="truncate font-medium text-gray-900 dark:text-gray-100">
                    {% if item.discount %}
                        Guthaben
                    {% elseif item.attendance is null %}
                        Gelöschte Teilnahme
                    {% else %}
                        <span>{{ item.attendance.offer.name }}</span>
                        {% if item.attendance.offer.dates is not empty %}
                            <span class="text-gray-500 dark:text-gray-400 font-normal">
                                ({{ component('Cms:OfferDateSingle', {date: item.attendance.offer.dates|first})|spaceless }})
                            </span>
                        {% endif %}
                    {% endif %}
                </div>
                {% if item.attendance and item.attendance.participant %}
                    <div class="truncate text-gray-500 dark:text-gray-400">{{ item.attendance.participant.name }}</div>
                {% endif %}
            </td>
            <td class="py-5 pl-8 pr-0 text-right align-top tabular-nums text-gray-700 dark:text-gray-300">{{ (item.amount/100)|format_currency('EUR', locale='de') }}</td>
        </tr>
    {% endfor %}
    </tbody>
    <tfoot>
    <tr>
        <th scope="row" class="pt-4 font-semibold text-gray-900 dark:text-gray-100 sm:hidden">Summe</th>
        <th scope="row"
            class="hidden pt-4 text-right font-semibold text-gray-900 dark:text-gray-100 sm:table-cell">Summe
        </th>
        <td class="pb-0 pl-8 pr-0 pt-4 text-right font-semibold tabular-nums text-gray-900 dark:text-gray-100">{{ (payment.totalAmount/100)|format_currency('EUR', locale='de') }}</td>
    </tr>
    </tfoot>
</table>
