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

{% block body %}
    <div class="licence__header mt-4">
        <div class="container">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <h1 class="licence__title">Informations complémentaires</h1>
                    <nav class="licence__breadcrumb">
                        {% include 'front/licence/_partial/_breadcrumb.html.twig' with {
                            items: [
                                { label: 'Accueil', route: 'app_home' },
                                { label: 'Licence', route: 'licence_index' },
                                { label: 'Type de licence', route: 'licence_type', params: { id: profil.id } },
                                { label: 'Catégorie', route: 'licence_category', params: { id: profil.id } },
                                { label: 'Informations' }
                            ]
                        } %}
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="grid grid-cols-1">
            <div class="licence__card">
                <div class="licence__card-header">
                    <h2 class="licence__card-title">Complément d'information</h2>
                </div>
                <div class="licence__card-body space-y-6">
                    <p class="text-sm text-gray-700 mb-4">
                        Merci de répondre aux deux questions suivantes pour continuer votre demande de licence.
                    </p>

                    {{ form_start(form) }}
                    <div>
                        {{ form_row(form.volunteer, { required: true }) }}
                    </div>
                    <div class="mt-6">
                        {{ form_row(form.educator, { required: true }) }}
                    </div>
                    <div class="mt-8 text-center">
                        <button type="submit" class="licence__button licence__button--choose">Continuer</button>
                    </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
    <script>
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            const form = e.currentTarget;
            const button = form.querySelector('button[type="submit"]');

            if (button.disabled) {
                return;
            }

            button.disabled = true;
            button.textContent = 'Chargement...';
            form.submit();
        });
    </script>
{% endblock %}