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

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

{% block main %}
    <section class="relative min-h-screen overflow-hidden bg-background pt-32 pb-16 md:pt-36 md:pb-20">
        <div class="absolute inset-x-0 top-0 h-28 bg-primary md:h-32"></div>
        <div class="pointer-events-none absolute inset-x-0 top-0 h-[28rem] bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.12),transparent_62%)]"></div>

        <div class="relative z-10 mx-auto max-w-[1440px] px-4 md:px-16">
            <header class="mx-auto max-w-3xl text-center">
                <span class="font-label text-[11px] font-semibold uppercase tracking-[0.22em] text-secondary">
                    {{ 'withdrawal.success.eyebrow'|trans }}
                </span>
                <h1 class="mt-4 font-display text-[34px] leading-[1.02] font-semibold [font-optical-sizing:auto] text-primary md:text-[48px]">
                    {{ 'withdrawal.success.heading'|trans }}
                </h1>
                <p class="mx-auto mt-4 max-w-3xl text-[15px] leading-7 text-primary/72">
                    {{ 'withdrawal.success.intro'|trans }}
                </p>
            </header>

            <div class="mx-auto mt-10 max-w-4xl border border-primary/10 bg-surface-container-low p-5 shadow-[0_20px_60px_rgba(51,38,28,0.06)] md:p-7">
                <div class="border border-primary/8 bg-white/70 p-5 md:p-7">
                    <dl class="divide-y divide-primary/8 border border-primary/10 bg-white">
                        <div class="grid gap-1 px-4 py-4 sm:grid-cols-3">
                            <dt class="font-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ 'withdrawal.summary.name'|trans }}</dt>
                            <dd class="text-[15px] text-primary/72 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-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ 'withdrawal.summary.reference'|trans }}</dt>
                            <dd class="text-[15px] text-primary/72 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-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ 'withdrawal.summary.email'|trans }}</dt>
                            <dd class="break-all text-[15px] text-primary/72 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-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ 'withdrawal.summary.order_received'|trans }}</dt>
                            <dd class="text-[15px] text-primary/72 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-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ 'withdrawal.summary.received_at'|trans }}</dt>
                                <dd class="text-[15px] text-primary/72 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-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ 'withdrawal.summary.reason'|trans }}</dt>
                                <dd class="text-[15px] text-primary/72 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-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ 'withdrawal.summary.comment'|trans }}</dt>
                                <dd class="whitespace-pre-line break-words text-[15px] text-primary/72 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-label text-[10px] font-semibold uppercase tracking-[0.16em] text-secondary">{{ 'withdrawal.summary.submitted_at'|trans }}</dt>
                            <dd class="text-[15px] text-primary/72 sm:col-span-2">{{ withdrawal_request.submittedAt|date('d/m/Y H:i:s T') }}</dd>
                        </div>
                    </dl>

                    <p class="mt-6 border-l-2 border-secondary bg-surface-container-low px-4 py-3 text-[14px] leading-6 text-primary/70">
                        {{ 'withdrawal.success.next_steps'|trans }}
                    </p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
