{% extends '@Contao/fragment/user_account/_base.html.twig' %}

{% block main %}
    <div class="py-16 border-t border-gray-200 dark:border-gray-800">
        <div class="mb-10">
            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-gray-50">{{ 'userAccount.payments.title'|trans({}, 'cms') }}</h2>
            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                {{ 'userAccount.payments.text'|trans({}, 'cms') }}
            </p>
        </div>

        <div class="flow-root">
            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
                        <thead>
                        <tr>
                            <th scope="col" class="py-3.5 pr-3 pl-4 text-left text-sm font-semibold text-gray-900 dark:text-gray-50 sm:pl-0">
                                {{ 'userAccount.payments.header.date'|trans({}, 'cms') }}
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-50">
                                {{ 'userAccount.payments.header.receipt'|trans({}, 'cms') }}
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-50">
                                {{ 'userAccount.payments.header.amount'|trans({}, 'cms') }}
                            </th>
                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-50">
                                {{ 'userAccount.payments.header.status'|trans({}, 'cms') }}
                            </th>
                            <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
                                <span class="sr-only">{{ 'userAccount.payments.header.actions'|trans({}, 'cms') }}</span>
                            </th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                        {% for payment in payments|default([]) %}
                            <tr>
                                <td class="py-4 pr-3 pl-4 text-sm whitespace-nowrap text-gray-900 dark:text-gray-300 sm:pl-0">
                                    {{ payment.createdAt|date('d.m.Y') }}
                                </td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400">
                                    {{ payment.receiptNumber|default('-') }}
                                </td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400">
                                    {{ (payment.totalAmount / 100)|format_currency('EUR') }}
                                </td>
                                <td class="px-3 py-4 text-sm whitespace-nowrap">
                                    {% if payment.status == 'paid' %}
                                        <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20">
                                            {{ ('userAccount.payments.status.'~payment.status)|trans({}, 'cms') }}
                                        </span>
                                    {% elseif payment.status == 'failed' or payment.status == 'abandoned' %}
                                        <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-500/10 dark:text-red-400 dark:ring-red-500/20">
                                            {{ ('userAccount.payments.status.'~payment.status)|trans({}, 'cms') }}
                                        </span>
                                    {% else %}
                                        <span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20">
                                            {{ ('userAccount.payments.status.'~payment.status)|trans({}, 'cms') }}
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                                    {% if payment.status == 'paid' %}
                                        <a href="{{ path('cms_payment_receipt', {id: payment.id}) }}" data-turbo-frame="modal" class="text-primary-600 hover:text-primary-900 dark:text-primary-400 dark:hover:text-primary-300">
                                            {{ 'userAccount.payments.action.view'|trans({}, 'cms') }}
                                        </a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
