{% 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 header %}{% endblock %}

{% block main %}
    <header class="theme-product-header">
        {% include 'partials/_nav.html.twig' %}
    </header>

    <section class="theme-page theme-auth-page">
        <div class="theme-container">
            <article class="theme-auth-card theme-auth-card--single">
                <div class="theme-auth-card__heading">
                    <h2>{{ 'withdrawal.heading'|trans }}</h2>
                    <p>{{ 'withdrawal.intro'|trans }}</p>
                </div>

                {{ form_start(form, {
                    attr: {
                        class: 'theme-auth-form',
                        'data-turbo': 'false'
                    }
                }) }}
                    <div class="theme-form-error">{{ form_errors(form) }}</div>

                    <div class="theme-account-form__grid">
                        <div class="theme-form-field">
                            {{ form_label(form.firstname) }}
                            {{ form_widget(form.firstname, { attr: { class: 'theme-form-input' } }) }}
                            <div class="theme-form-error">{{ form_errors(form.firstname) }}</div>
                        </div>

                        <div class="theme-form-field">
                            {{ form_label(form.lastname) }}
                            {{ form_widget(form.lastname, { attr: { class: 'theme-form-input' } }) }}
                            <div class="theme-form-error">{{ form_errors(form.lastname) }}</div>
                        </div>

                        <div class="theme-form-field theme-account-form__wide">
                            {{ form_label(form.contractReference) }}
                            {{ form_widget(form.contractReference, { attr: { class: 'theme-form-input' } }) }}
                            <div class="theme-form-note">{{ form_help(form.contractReference) }}</div>
                            <div class="theme-form-error">{{ form_errors(form.contractReference) }}</div>
                        </div>

                        <div class="theme-form-field theme-account-form__wide">
                            {{ form_label(form.receiptEmail) }}
                            {{ form_widget(form.receiptEmail, { attr: { class: 'theme-form-input' } }) }}
                            <div class="theme-form-note">{{ form_help(form.receiptEmail) }}</div>
                            <div class="theme-form-error">{{ form_errors(form.receiptEmail) }}</div>
                        </div>

                        {% set received_choice = form.vars.data.orderReceived %}
                        <div
                            class="theme-form-field theme-account-form__wide"
                            x-data="{ orderReceived: '{{ received_choice is same as(true) ? '1' : (received_choice is same as(false) ? '0' : '') }}' }"
                        >
                            <fieldset class="theme-form-field">
                                <legend class="theme-eyebrow">{{ form.orderReceived.vars.label|trans }}</legend>
                                <div class="theme-form-actions">
                                    {% for choice in form.orderReceived %}
                                        <label class="theme-checkbox">
                                            {{ form_widget(choice, {
                                                attr: {
                                                    class: 'theme-checkbox__input',
                                                    'x-model': 'orderReceived'
                                                }
                                            }) }}
                                            <span>{{ choice.vars.label|trans }}</span>
                                        </label>
                                    {% endfor %}
                                </div>
                                <div class="theme-form-error">{{ form_errors(form.orderReceived) }}</div>
                            </fieldset>

                            <div
                                class="theme-form-field"
                                x-cloak
                                x-show="orderReceived === '1'"
                            >
                                {{ form_label(form.receivedAt) }}
                                {{ form_widget(form.receivedAt, {
                                    attr: {
                                        class: 'theme-form-input',
                                        'x-bind:disabled': "orderReceived !== '1'",
                                        'x-bind:required': "orderReceived === '1'"
                                    }
                                }) }}
                                <div class="theme-form-note">{{ form_help(form.receivedAt) }}</div>
                                <div class="theme-form-error">{{ form_errors(form.receivedAt) }}</div>
                            </div>
                        </div>

                        <div class="theme-form-field theme-account-form__wide">
                            {{ form_label(form.reasonCode) }}
                            {{ form_widget(form.reasonCode, { attr: { class: 'theme-form-input' } }) }}
                            <div class="theme-form-note">{{ form_help(form.reasonCode) }}</div>
                            <div class="theme-form-error">{{ form_errors(form.reasonCode) }}</div>
                        </div>

                        <div class="theme-form-field theme-account-form__wide">
                            {{ form_label(form.comment) }}
                            {{ form_widget(form.comment, { attr: { class: 'theme-form-input' } }) }}
                            <div class="theme-form-note">{{ form_help(form.comment) }}</div>
                            <div class="theme-form-error">{{ form_errors(form.comment) }}</div>
                        </div>

                        <div class="theme-form-field theme-account-form__wide">
                            {{ form_row(form.captcha) }}
                        </div>
                    </div>

                    <p class="theme-form-note">{{ 'withdrawal.confirmation_notice'|trans }}</p>

                    <div class="theme-form-actions">
                        <button type="submit" class="theme-form-button theme-form-button--fill">
                            {{ 'withdrawal.form.confirm'|trans }}
                        </button>
                    </div>

                    <div class="hidden">{{ form_rest(form) }}</div>
                {{ form_end(form) }}
            </article>
        </div>
    </section>
{% endblock %}
