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

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

{% block body %}
<style>
    .form-container {
        max-width: 400px;
        margin: 50px auto;
        padding: 20px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .form-title {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .form-group {
        margin-bottom: 15px;
    }
    .form-label {
        display: block;
        font-weight: 600;
        margin-bottom: 5px;
    }
    .form-input {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .form-checkbox {
        margin-right: 5px;
    }
    .form-error {
        color: #a94442;
        font-size: 12px;
        margin-top: 3px;
    }
    .form-button {
        width: 100%;
        padding: 10px;
        background: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
    }
    .form-button:hover {
        background: #0056b3;
    }
</style>

<div class="form-container">
    <h1 class="form-title">Créer un compte</h1>

    {{ form_start(registrationForm) }}

        <div class="form-group">
            {{ form_label(registrationForm.username, null, { label_attr: { class: "form-label" } }) }}
            {{ form_widget(registrationForm.username, { attr: { class: "form-input" } }) }}
            {{ form_errors(registrationForm.username, { attr: { class: "form-error" } }) }}
        </div>

        <div class="form-group">
            {{ form_label(registrationForm.plainPassword, null, { label_attr: { class: "form-label" } }) }}
            {{ form_widget(registrationForm.plainPassword, { attr: { class: "form-input" } }) }}
            {{ form_errors(registrationForm.plainPassword, { attr: { class: "form-error" } }) }}
        </div>

        <div class="form-group">
            {{ form_widget(registrationForm.agreeTerms, { attr: { class: "form-checkbox" } }) }}
            {{ form_label(registrationForm.agreeTerms, null, { label_attr: { class: "inline" } }) }}
            {{ form_errors(registrationForm.agreeTerms, { attr: { class: "form-error" } }) }}
        </div>

        <div>
            <button type="submit" class="form-button">S’inscrire</button>
        </div>

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