{% extends 'base.html.twig' %}
{% form_theme form with app_form_themes() only %}

{% block title %}{{ 'withdrawal.page_title'|trans }}{% endblock %}
{% block meta %}
    {{ include('partials/seo.html.twig', {
        title_key: 'withdrawal.title',
        description_key: 'withdrawal.description',
        robots: 'noindex,nofollow'
    }) }}
{% endblock meta %}

{% block main %}
    <section data-withdrawal-page 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.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.heading'|trans }}
                </h1>
                <p class="mx-auto mt-4 max-w-3xl text-[15px] leading-7 text-primary/72">
                    {{ 'withdrawal.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">
                    {{ form_start(form, { attr: { class: 'grid min-w-0 gap-6', 'data-turbo': 'false' } }) }}
                        <div class="text-sm text-red-600">{{ form_errors(form) }}</div>

                        <div class="grid min-w-0 gap-4 md:grid-cols-2">
                            {{ form_row(form.firstname) }}
                            {{ form_row(form.lastname) }}
                            {{ form_row(form.contractReference, { row_attr: { class: 'md:col-span-2' } }) }}
                            {{ form_row(form.receiptEmail, { row_attr: { class: 'md:col-span-2' } }) }}
                            {% set received_choice = form.vars.data.orderReceived %}
                            <div
                                class="grid gap-4 md:col-span-2"
                                x-data="{ orderReceived: '{{ received_choice is same as(true) ? '1' : (received_choice is same as(false) ? '0' : '') }}' }"
                                @change="orderReceived = $event.target.value"
                            >
                                {{ form_row(form.orderReceived) }}
                                <div x-cloak x-show="orderReceived === '1'">
                                    {{ form_row(form.receivedAt, { attr: {
                                        'x-bind:disabled': "orderReceived !== '1'",
                                        'x-bind:required': "orderReceived === '1'"
                                    } }) }}
                                </div>
                            </div>
                            {{ form_row(form.reasonCode, { row_attr: { class: 'md:col-span-2' } }) }}
                            {{ form_row(form.comment, { row_attr: { class: 'md:col-span-2' } }) }}
                            {{ form_row(form.captcha, { row_attr: { class: 'md:col-span-2' } }) }}
                        </div>

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

                        <div class="flex justify-end">
                            <button
                                type="submit"
                                class="inline-flex min-h-[46px] cursor-pointer items-center justify-center border border-primary bg-primary px-6 py-3 font-label text-[10px] font-semibold uppercase tracking-[0.18em] text-white transition hover:border-secondary hover:bg-secondary"
                            >
                                {{ 'withdrawal.form.confirm'|trans }}
                            </button>
                        </div>
                        <div class="hidden">{{ form_rest(form) }}</div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </section>
{% endblock %}
