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

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

{% block body %}
<div class="flex grow justify-center items-center min-h-screen bg-gray-100">
    <div class="w-full max-w-md bg-white shadow-lg rounded-lg p-6">
        <h2 class="text-2xl font-bold text-center text-gray-800 mb-6">Inscription</h2>

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

        <div>
            {{ form_label(registrationForm.username, 'Nom d\'utilisateur', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
            {{ form_widget(registrationForm.username, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-300'}}) }}
            {{ form_errors(registrationForm.username, {'attr': {'class': 'text-red-500 text-sm'}}) }}
        </div>

        <div>
            {{ form_label(registrationForm.plainPassword, 'Mot de passe', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
            {{ form_widget(registrationForm.plainPassword, {'attr': {'class': 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-300'}}) }}
            {{ form_errors(registrationForm.plainPassword, {'attr': {'class': 'text-red-500 text-sm'}}) }}
        </div>

        <div class="mt-4">
            <button type="submit" class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-md shadow-md hover:bg-blue-700 transition duration-300">
                S'inscrire
            </button>
        </div>

        <div class="mt-4 text-center">
            <p class="text-gray-600">Vous avez un compte ?</p>
            <a href="{{ path('app_login') }}" class="mt-2 inline-block bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-md shadow-md hover:bg-gray-300 transition duration-300">
                Connectez-vous
            </a>
        </div>

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