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

{% block title %}{{ 'profile.complete_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;">{{ 'profile.complete_title'|trans }}</h1>
    
    <p style="text-align: center; margin-bottom: 1.5rem;">{{ 'profile.complete_intro'|trans }}</p>

    {% if rejectedReason %}
        <div class="alert alert-error" style="margin-bottom: 1.5rem;">
            <strong>{{ 'profile.rejected_title'|trans }}</strong><br>
            {{ rejectedReason }}
        </div>
    {% endif %}

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

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

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

            <div class="form-group" style="margin-bottom: 0.8rem;">
                <label class="checkbox-label">
                    {{ form_widget(profileForm.isAnonymous) }}
                    <span>{{ 'profile.is_anonymous'|trans }}</span>
                </label>
            </div>

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

            <h2 style="margin-bottom: 1rem;">{{ 'profile.address_section'|trans }}</h2>

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

            <div class="form-group" style="margin-bottom: 0.8rem;">
                <label>{{ 'profile.address_line2'|trans }}</label>
                {{ form_widget(profileForm.addressLine2) }}
                {{ form_errors(profileForm.addressLine2) }}
            </div>

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

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

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

            <div class="form-group" style="margin-bottom: 1.2rem;">
                <label class="checkbox-label">
                    {{ form_widget(profileForm.acceptsGeolocation) }}
                    <span>{{ 'profile.accepts_geolocation'|trans }}</span>
                </label>
            </div>

            <h2 style="margin-bottom: 1rem;">{{ 'profile.diagnosis_section'|trans }}</h2>

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

            <h2 style="margin-bottom: 1rem;">{{ 'profile.id_card_section'|trans }}</h2>

            <p style="margin-bottom: 0.8rem; font-size: 0.9rem;">{{ 'profile.id_card_help'|trans }}</p>

            <div class="form-group" style="margin-bottom: 1.2rem;">
                <label>{{ 'profile.id_card'|trans }} <span class="req">*</span></label>
                {{ form_widget(profileForm.idCardFile) }}
                {{ form_errors(profileForm.idCardFile) }}
                <p class="form-note" style="margin: 0.3rem 0 0 0; font-size: 0.85rem;">{{ 'profile.id_card_formats'|trans }}</p>
            </div>

            <h2 style="margin-bottom: 1rem;">{{ 'profile.moderation_section'|trans }}</h2>

            <div class="form-group" style="margin-bottom: 1rem;">
                <label class="checkbox-label">
                    {{ form_widget(profileForm.wantsToModerate) }}
                    <span>{{ 'profile.wants_to_moderate'|trans }}</span>
                </label>
            </div>

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

            <div class="actions">
                <button type="submit">{{ 'profile.submit'|trans }}</button>
            </div>

        {{ form_end(profileForm) }}
    </div>
</main>
{% endblock %}