{% extends 'base.html.twig' %}

{% block title %}{{ 'withdrawal.success.page_title'|trans }}{% endblock %}

{% block main %}
    <section class="min-h-page bg-page py-10 sm:py-14">
        <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
            <div class="overflow-hidden rounded-sm border border-panel-border bg-surface shadow-panel">
                <div class="border-b border-success-border bg-success-surface px-6 py-8 sm:px-8">
                    <p class="text-xs uppercase tracking-eyebrow text-success-foreground">{{ 'withdrawal.success.eyebrow'|trans }}</p>
                    <h1 class="mt-3 font-serif text-3xl text-foreground sm:text-4xl">{{ 'withdrawal.success.heading'|trans }}</h1>
                    <p class="mt-3 text-sm leading-6 text-foreground-muted sm:text-base">{{ 'withdrawal.success.intro'|trans }}</p>
                </div>

                <div class="px-6 py-8 sm:px-8">
                    <dl class="divide-y divide-border-muted rounded-sm border border-border bg-surface">
                        <div class="grid gap-1 px-4 py-4 sm:grid-cols-3"><dt class="font-medium text-foreground">{{ 'withdrawal.summary.name'|trans }}</dt><dd class="text-foreground-muted sm:col-span-2">{{ withdrawal_request.firstname }} {{ withdrawal_request.lastname }}</dd></div>
                        <div class="grid gap-1 px-4 py-4 sm:grid-cols-3"><dt class="font-medium text-foreground">{{ 'withdrawal.summary.reference'|trans }}</dt><dd class="text-foreground-muted sm:col-span-2">{{ withdrawal_request.contractReference }}</dd></div>
                        <div class="grid gap-1 px-4 py-4 sm:grid-cols-3"><dt class="font-medium text-foreground">{{ 'withdrawal.summary.email'|trans }}</dt><dd class="text-foreground-muted sm:col-span-2">{{ withdrawal_request.receiptEmail }}</dd></div>
                        <div class="grid gap-1 px-4 py-4 sm:grid-cols-3"><dt class="font-medium text-foreground">{{ 'withdrawal.summary.order_received'|trans }}</dt><dd class="text-foreground-muted sm:col-span-2">{{ (withdrawal_request.orderReceived is same as(true) ? 'withdrawal.form.yes' : (withdrawal_request.orderReceived is same as(false) ? 'withdrawal.form.no' : 'withdrawal.form.not_provided'))|trans }}</dd></div>
                        {% if withdrawal_request.orderReceived and withdrawal_request.receivedAt %}
                            <div class="grid gap-1 px-4 py-4 sm:grid-cols-3"><dt class="font-medium text-foreground">{{ 'withdrawal.summary.received_at'|trans }}</dt><dd class="text-foreground-muted sm:col-span-2">{{ withdrawal_request.receivedAt|date('d/m/Y') }}</dd></div>
                        {% endif %}
                        {% if withdrawal_request.reasonCode %}
                            <div class="grid gap-1 px-4 py-4 sm:grid-cols-3"><dt class="font-medium text-foreground">{{ 'withdrawal.summary.reason'|trans }}</dt><dd class="text-foreground-muted sm:col-span-2">{{ ('withdrawal.reason.' ~ withdrawal_request.reasonCode)|trans }}</dd></div>
                        {% endif %}
                        {% if withdrawal_request.comment %}
                            <div class="grid gap-1 px-4 py-4 sm:grid-cols-3"><dt class="font-medium text-foreground">{{ 'withdrawal.summary.comment'|trans }}</dt><dd class="whitespace-pre-line text-foreground-muted sm:col-span-2">{{ withdrawal_request.comment }}</dd></div>
                        {% endif %}
                        <div class="grid gap-1 px-4 py-4 sm:grid-cols-3"><dt class="font-medium text-foreground">{{ 'withdrawal.summary.submitted_at'|trans }}</dt><dd class="text-foreground-muted sm:col-span-2">{{ withdrawal_request.submittedAt|date('d/m/Y H:i:s T') }}</dd></div>
                    </dl>

                    <p class="mt-6 text-sm leading-6 text-foreground-muted">{{ 'withdrawal.success.next_steps'|trans }}</p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
