{% extends 'base.html.twig' %}
{% block title %}Date de naissance — Bubul{% endblock %}
{% block show_sidebar %}false{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}
{% block body %}
{% embed '_organisms/step-layout/step-layout.html.twig' %}
{% block heading %}
<div class="w-full max-w-xl text-center mb-3 sm:mb-8">
    <h1 class="text-xl sm:text-3xl font-bold text-gray-700 mb-2">Votre date de naissance ?</h1>
    <p class="text-sm text-gray-500">Pour personnaliser votre expérience sur Bubul.</p>
</div>
{% endblock %}
{% block card %}
    {% if error is defined and error %}
        <div class="error-message mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{{ error }}</div>
    {% endif %}
    <form method="POST" action="{{ path('app_welcome') }}">
        <input type="hidden" name="step" value="birthday">
        <input type="hidden" name="_token" value="{{ csrf_token('welcome') }}">
        {% set currentYear = 'now'|date('Y') %}
        <div class="flex gap-3 mb-3 sm:mb-6">
            <div class="flex-1">
                <label class="block text-xs font-medium text-gray-500 mb-1">Jour</label>
                <input type="text" id="dob-day" name="day" maxlength="2" placeholder="JJ" required inputmode="numeric" min="1" max="31"
                       oninput="this.value=this.value.replace(/\D/g,'');if(parseInt(this.value,10)>31)this.value='31';if(this.value.length===2)document.getElementById('dob-month').focus()"
                       class="w-full px-3 py-3 border border-gray-300 rounded-xl text-sm text-center font-semibold focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
            </div>
            <div class="flex-1">
                <label class="block text-xs font-medium text-gray-500 mb-1">Mois</label>
                <input type="text" id="dob-month" name="month" maxlength="2" placeholder="MM" required inputmode="numeric" min="1" max="12"
                       oninput="this.value=this.value.replace(/\D/g,'');if(parseInt(this.value,10)>12)this.value='12';if(this.value.length===2)document.getElementById('dob-year').focus()"
                       class="w-full px-3 py-3 border border-gray-300 rounded-xl text-sm text-center font-semibold focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
            </div>
            <div class="flex-1">
                <label class="block text-xs font-medium text-gray-500 mb-1">Année</label>
                <input type="text" id="dob-year" name="year" maxlength="4" placeholder="AAAA" required inputmode="numeric" min="1900" max="{{ currentYear }}"
                       oninput="this.value=this.value.replace(/\D/g,'');if(this.value.length===4){var y=parseInt(this.value,10);if(y>{{ currentYear }})this.value='{{ currentYear }}';this.closest('form').querySelector('[type=submit]')?.focus()}"
                       class="w-full px-3 py-3 border border-gray-300 rounded-xl text-sm text-center font-semibold focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
            </div>
        </div>
        {% include '_atoms/button/button.html.twig' with {label: 'Continuer', type: 'submit', variant: 'primary', width: 'full'} only %}
    </form>
{% endblock %}
{% endembed %}
{% endblock %}