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

{% block title %}{{ 'registration.title'|trans }} - Na+{% endblock %}

{% block body %}
<main id="contenu">
    <img src="/Logo.png" alt="Logo n-atypik" class="logo-central" />
    
    <h1 class="hero-title" style="margin-bottom: 1rem;">{{ 'registration.title'|trans }}</h1>

    <div class="content">
        {{ form_start(registrationForm, {'attr': {'class': 'card', 'style': 'padding: 1.5rem;'}}) }}
            
            <h2 style="margin-top: 0; margin-bottom: 1rem;">{{ 'registration.personal_info'|trans }}</h2>

            <div class="form-row" style="margin-bottom: 0.8rem;">
                <div class="form-group" style="margin-bottom: 0;">
                    <label>{{ 'registration.first_name'|trans }} <span class="req">*</span></label>
                    {{ form_widget(registrationForm.firstName) }}
                    {{ form_errors(registrationForm.firstName) }}
                </div>

                <div class="form-group" style="margin-bottom: 0;">
                    <label>{{ 'registration.last_name'|trans }} <span class="req">*</span></label>
                    {{ form_widget(registrationForm.lastName) }}
                    {{ form_errors(registrationForm.lastName) }}
                </div>
            </div>

            <div class="form-group" style="margin-bottom: 0.8rem;">
                <label>{{ 'registration.email'|trans }} <span class="req">*</span></label>
                {{ form_widget(registrationForm.email) }}
                {{ form_errors(registrationForm.email) }}
            </div>

            <div class="form-row" style="margin-bottom: 0.8rem;">
                <div class="form-group" style="margin-bottom: 0; position: relative;">
                    <label>{{ 'registration.password'|trans }} <span class="req">*</span></label>
                    <div style="position: relative;">
                        {{ form_widget(registrationForm.plainPassword.first, {'attr': {'type': 'text', 'style': 'padding-right: 45px;'}}) }}
                        <button type="button" onclick="togglePassword('registration_form_plainPassword_first', this)" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 0; width: 30px; height: 30px;" title="Masquer le mot de passe">
                            👁️
                        </button>
                    </div>
                    {{ form_errors(registrationForm.plainPassword.first) }}
                    <p class="form-note" style="margin: 0.2rem 0 0 0; font-size: 0.85rem; color: #666;">
                        ⚠️ <strong>Minimum 8 caractères</strong>
                    </p>
                </div>

                <div class="form-group" style="margin-bottom: 0; position: relative;">
                    <label>{{ 'registration.password_confirm'|trans }} <span class="req">*</span></label>
                    <div style="position: relative;">
                        {{ form_widget(registrationForm.plainPassword.second, {'attr': {'type': 'text', 'style': 'padding-right: 45px;'}}) }}
                        <button type="button" onclick="togglePassword('registration_form_plainPassword_second', this)" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1.2rem; padding: 0; width: 30px; height: 30px;" title="Masquer le mot de passe">
                            👁️
                        </button>
                    </div>
                    {{ form_errors(registrationForm.plainPassword.second) }}
                </div>
            </div>

            <div class="form-group" style="margin-bottom: 1.2rem;">
                <label>{{ 'registration.birth_date'|trans }} <span class="req">*</span></label>
                {{ form_widget(registrationForm.birthDateString) }}
                {{ form_errors(registrationForm.birthDateString) }}
            </div>

            <div style="background: #ffe0e0; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; border: 2px solid #ffcccc;">
                <h2 style="margin: 0 0 0.8rem 0; font-size: 1.1rem;">{{ 'registration.charter_title'|trans }}</h2>
                
                <p style="margin: 0 0 0.8rem 0; font-size: 0.9rem; line-height: 1.6;">
                    Je m'engage à ne pas harceler, menacer, insulter ou humilier les membres de la communauté Na+.<br>
                    Je m'interdis les discours haineux ou discriminatoires.<br>
                    Je m'interdis de divulguer des informations personnelles.<br>
                    <strong>L'équipe Na+ se réserve le droit de suspendre ou bannir tout compte ne respectant pas cette charte.</strong>
                </p>

                <div class="consent-checkboxes" style="margin: 0;">
                    <label class="checkbox-label">
                        {{ form_widget(registrationForm.agreeCharter) }}
                        <span><strong>{{ 'registration.agree_charter'|trans }} <span class="req">*</span></strong></span>
                    </label>
                    {{ form_errors(registrationForm.agreeCharter) }}
                </div>
            </div>

            <div class="consent-checkboxes" style="margin-bottom: 0.8rem;">
                <label class="checkbox-label">
                    {{ form_widget(registrationForm.agreeTerms) }}
                    <span>
                        {{ 'registration.agree_terms_label'|trans }}
                        <a href="{{ path('app_cgu', {'_locale': app.request.locale}) }}" target="_blank">{{ 'registration.cgu_link'|trans }}</a>
                        <span class="req">*</span>
                    </span>
                </label>
                {{ form_errors(registrationForm.agreeTerms) }}

                <label class="checkbox-label">
                    {{ form_widget(registrationForm.agreePrivacy) }}
                    <span>
                        {{ 'registration.agree_privacy_label'|trans }}
                        <a href="{{ path('app_confidentialite', {'_locale': app.request.locale}) }}" target="_blank">{{ 'registration.privacy_link'|trans }}</a>
                        <span class="req">*</span>
                    </span>
                </label>
                {{ form_errors(registrationForm.agreePrivacy) }}

                <label class="checkbox-label">
                    {{ form_widget(registrationForm.agreeAdult) }}
                    <span>{{ 'registration.agree_adult'|trans }} <span class="req">*</span></span>
                </label>
                {{ form_errors(registrationForm.agreeAdult) }}
            </div>

            <p class="form-note" style="margin: 0 0 1rem 0; font-size: 0.85rem;">
                <span class="req">*</span> {{ 'registration.required_fields'|trans }}
            </p>

            <div class="actions" style="display: flex; gap: 1rem; align-items: center;">
                <button type="submit" style="margin: 0;">{{ 'registration.submit'|trans }}</button>
                <a href="{{ path('app_home', {'_locale': app.request.locale}) }}" class="btn-secondary" style="margin: 0; padding: 0.75rem 1.5rem; display: inline-block; height: auto;">
                    {{ 'registration.back'|trans }}
                </a>
            </div>

            <p class="form-note" style="margin: 1rem 0 0 0; text-align: center; font-size: 0.9rem;">
                {{ 'registration.already_account'|trans }}
                <a href="{{ path('app_connexion', {'_locale': app.request.locale}) }}">{{ 'registration.login_here'|trans }}</a>
            </p>

        {{ form_end(registrationForm) }}
    </div>
</main>

<script>
function togglePassword(fieldId, button) {
    const field = document.getElementById(fieldId);
    if (field) {
        if (field.type === 'text') {
            field.type = 'password';
            button.innerHTML = '🙈';
            button.title = 'Afficher le mot de passe';
        } else {
            field.type = 'text';
            button.innerHTML = '👁️';
            button.title = 'Masquer le mot de passe';
        }
    }
}
</script>
{% endblock %}