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

{% block container %}
    {% embed '@Contao/fragment/_modalBase.html.twig' with { modalContent: block('content') } only %}
        {% block modalContent %}
            {{ modalContent|raw }}
        {% endblock %}
    {% endembed %}
{% endblock %}

{% block content %}
    <div class="flex flex-col h-full max-h-[85vh] -m-4 md:-m-8">
        <!-- Header -->
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 rounded-t-lg shrink-0 flex items-center justify-between">
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                {{ 'userAccount.payments.receipt.title'|trans({}, 'cms') }}
            </h3>
            <button type="button" onclick="this.closest('dialog')?.close()" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
                <span class="sr-only">Close</span>
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <!-- Content -->
        <div class="flex-1 overflow-y-auto px-6 py-6 bg-white dark:bg-gray-900 rounded-b-lg">
            {{ component('Cms:Invoice', { payment: payment, headline: 'userAccount.payments.receipt.headline'|trans({}, 'cms') }) }}
        </div>
    </div>
{% endblock %}
