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

{% block title %}Inscription{% endblock %}

{% block body %}
    <div class="bg-gray-100 flex items-center justify-center min-h-screen">
        <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
            <h2 class="text-2xl font-bold text-center mb-2">Inscription</h2>
            <p class="text-center text-gray-600 mb-6">
                Déjà inscrit ? <a href="{{ path('app_login') }}" class="text-teal-600 hover:underline">Connectez-vous ici</a>
            </p>

            {{ form_start(registrationForm, { 'attr': { 'class': 'space-y-4' } }) }}

            <div class="mb-4">
                {{ form_label(registrationForm.nickname, 'Pseudo', {'label_attr': {'class': 'block text-gray-700 mb-2'}}) }}
                {{ form_widget(registrationForm.nickname, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500'}}) }}
                {{ form_errors(registrationForm.nickname) }}
            </div>

            <div class="mb-4">
                {{ form_label(registrationForm.firstname, 'Prénom', {'label_attr': {'class': 'block text-gray-700 mb-2'}}) }}
                {{ form_widget(registrationForm.firstname, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500'}}) }}
                {{ form_errors(registrationForm.firstname) }}
            </div>

            <div class="mb-4">
                {{ form_label(registrationForm.lastname, 'Nom', {'label_attr': {'class': 'block text-gray-700 mb-2'}}) }}
                {{ form_widget(registrationForm.lastname, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500'}}) }}
                {{ form_errors(registrationForm.lastname) }}
            </div>

            <div class="mb-4">
                {{ form_label(registrationForm.mail, 'Adresse email', {'label_attr': {'class': 'block text-gray-700 mb-2'}}) }}
                {{ form_widget(registrationForm.mail, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500'}}) }}
                {{ form_errors(registrationForm.mail) }}
            </div>

            {% if employee %}
            <div class="mb-4">
                {{ form_label(registrationForm.company, 'Sélectionnez une entreprise', {'label_attr': {'class': 'block text-gray-700 mb-2'}}) }}
                {{ form_widget(registrationForm.company, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500'}}) }}
                {{ form_errors(registrationForm.company) }}
            </div>
            {% endif %}

            <!-- Mot de passe -->
            <div class="mb-4">
                {{ form_label(registrationForm.plainPassword, 'Mot de passe', {'label_attr': {'class': 'block text-gray-700 mb-2'}}) }}
                {{ form_widget(registrationForm.plainPassword, {'attr': {'class': 'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500'}}) }}
                {{ form_errors(registrationForm.plainPassword) }}
            </div>

            <div class="text-center">
                <button type="submit" class="bg-teal-600 text-white px-6 py-2 rounded-lg w-full hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
                    S'inscrire
                </button>
            </div>

            {{ form_end(registrationForm) }}
        </div>
    </div>
{% endblock %}