{% 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 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-border-muted bg-surface-muted px-6 py-8 sm:px-8">
                    <h1 class="font-serif text-3xl text-foreground sm:text-4xl">{{ 'withdrawal.heading'|trans }}</h1>
                    <p class="mt-3 text-sm leading-6 text-foreground-muted sm:text-base">{{ 'withdrawal.intro'|trans }}</p>
                </div>

                <div class="px-6 py-8 sm:px-8">
                    {{ form_start(form, { attr: { class: 'grid min-w-0 gap-6', 'data-turbo': 'false' } }) }}
                        {{ form_errors(form) }}
                        <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="text-sm leading-6 text-foreground-muted">{{ 'withdrawal.confirmation_notice'|trans }}</p>

                        <div class="flex justify-end">
                            <button type="submit" class="inline-flex min-h-12 items-center justify-center bg-foreground px-6 text-sm font-medium uppercase tracking-button text-on-foreground transition hover:bg-accent">
                                {{ 'withdrawal.form.confirm'|trans }}
                            </button>
                        </div>
                        <div class="hidden">{{ form_rest(form) }}</div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </section>
{% endblock %}
