{% extends 'App::V2/base.html.twig' %}

{% set site_name = site_name|default('RueduProf') %}
{% set nav_items = nav_items|default([
    {'label': 'Cours particuliers', 'href': app.request.getSchemeAndHttpHost() ~ path('app_home_page')},
    {'label': 'Connexion', 'href': app.request.getSchemeAndHttpHost() ~ path('fos_user_security_login')},
    {'label': 'Inscription', 'href': '#inscription'},
    {'label': 'Blog', 'href': app.request.getSchemeAndHttpHost() ~ path('app_blog_show_index')}
]) %}

{% set seoTitle = 'Créer un compte sur RueduProf' %}
{% set seoDescription = 'Inscrivez-vous sur RueduProf pour trouver un professeur ou publier votre profil.' %}
{% set seoUrl = 'https://www.rueduprof.com/register/' %}

{% block title %}{{ seoTitle }}{% endblock %}
{% block meta_title %}{{ seoTitle }}{% endblock %}
{% block meta_description %}{{ seoDescription }}{% endblock %}
{% block og_url %}{{ seoUrl }}{% endblock %}
{% block canonical %}{{ seoUrl }}{% endblock %}

{% block open_graph %}
    <meta property="og:title" content="{{ seoTitle }} - RueduProf" />
    <meta property="og:description" content="{{ seoDescription }}" />
    <meta property="og:url" content="{{ seoUrl }}" />
    <meta property="og:image" content="https://www.rueduprof.com/images/rueduprof-2016-2.svg" />
{% endblock %}

{% block twitter_card %}
    <meta name="twitter:title" content="{{ seoTitle }} - RueduProf" />
    <meta name="twitter:description" content="{{ seoDescription }}" />
    <meta name="twitter:image" content="https://www.rueduprof.com/images/rueduprof-2016-2.svg" />
{% endblock %}

{% block body %}
<section class="listing-hero-section pt-4 pt-lg-5 pb-4 pb-lg-5" id="inscription">
    <div class="container-xxl position-relative">
        <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb small mb-0">
                <li class="breadcrumb-item"><a href="{{ app.request.getSchemeAndHttpHost() ~ path('homepage') }}">Accueil</a></li>
                <li class="breadcrumb-item active" aria-current="page">Créer un compte</li>
            </ol>
        </nav>

        <div class="p-3 p-md-4 p-xl-5">
            <div class="row g-4 g-xl-5 align-items-center justify-content-center">
                <div class="col-xl-7">
                    <div class="search-glass-card p-3 p-md-4 p-xl-4">
                        <div class="search-card-header mb-3">
                            <div>
                                <div class="search-card-title">Créer un compte</div>
                            </div>
                            <div class="search-card-badge">
                                <i class="bi bi-person-plus"></i>
                            </div>
                        </div>

                        <div class="auth-tabs mb-4">
                            <a href="{{ path('fos_user_security_login') }}" class="auth-tab-link">Connexion</a>
                            <a href="#" class="auth-tab-link is-active">Inscription</a>
                        </div>

                        <form action="{{ path('fos_user_registration_register') }}" class="row g-3" method="post" novalidate>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Adresse email</label>
                                <div class="form-icon-control">
                                    <i class="bi bi-envelope"></i>
                                    {{ form_widget(form.email, { 'attr': {'class': 'form-control form-control-lg', 'placeholder': 'vous@exemple.fr', 'autocomplete': 'email'} }) }}
                                </div>
                                {% if form_errors(form.email) %}
                                    <div class="text-danger small mt-2">{{ form_errors(form.email) }}</div>
                                {% endif %}
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Pseudo</label>
                                <div class="form-icon-control">
                                    <i class="bi bi-person"></i>
                                    {{ form_widget(form.username, { 'attr': {'class': 'form-control form-control-lg', 'placeholder': 'Votre pseudo', 'autocomplete': 'username'} }) }}
                                </div>
                                {% if form_errors(form.username) %}
                                    <div class="text-danger small mt-2">{{ form_errors(form.username) }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Mot de passe</label>
                                <div class="form-icon-control password-control">
                                    <i class="bi bi-lock"></i>
                                    {{ form_widget(form.plainPassword.first, { 'attr': {'class': 'form-control form-control-lg', 'placeholder': 'Choisissez un mot de passe', 'autocomplete': 'new-password'} }) }}
                                    <button class="password-toggle" type="button" data-toggle-password aria-label="Afficher le mot de passe">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                                {% if form_errors(form.plainPassword.first) %}
                                    <div class="text-danger small mt-2">{{ form_errors(form.plainPassword.first) }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Confirmation</label>
                                <div class="form-icon-control password-control">
                                    <i class="bi bi-shield-lock"></i>
                                    {{ form_widget(form.plainPassword.second, { 'attr': {'class': 'form-control form-control-lg', 'placeholder': 'Confirmez votre mot de passe', 'autocomplete': 'new-password'} }) }}
                                </div>
                                {% if form_errors(form.plainPassword.second) %}
                                    <div class="text-danger small mt-2">{{ form_errors(form.plainPassword.second) }}</div>
                                {% endif %}
                            </div>

                            {% if form.recaptcha is defined %}
                                <div class="col-12">
                                    {% if form_errors(form.recaptcha) %}
                                        <div class="text-danger small mb-2">{{ form_errors(form.recaptcha) }}</div>
                                    {% endif %}
                                    {{ form_widget(form.recaptcha, { 'attr': {
                                        'options' : {
                                            'theme': 'light',
                                            'type': 'image',
                                            'size': 'normal'
                                        }
                                    } }) }}
                                </div>
                            {% endif %}

                            <div class="col-12">
                                <div class="form-check auth-legal-check">
                                    <input class="form-check-input" type="checkbox" checked disabled id="consentRulesRegister">
                                    <label class="form-check-label" for="consentRulesRegister">
                                        En créant un compte, vous acceptez les <a href="{{ path('app_cgu') }}" target="_blank">termes et conditions d'utilisation</a>.
                                    </label>
                                </div>
                            </div>

                            <div class="col-12 d-grid gap-3 mt-2">
                                <button type="submit" class="btn btn-primary btn-lg btn-pill">Créer mon compte</button>
                                <a href="/login/google" class="btn btn-light btn-lg btn-pill listing-secondary-btn text-decoration-none text-center">
                                    <img src="/images/google.svg" width="20" alt="Google" class="me-2" />Se connecter avec Google
                                </a>
                            </div>

                            <div class="col-12">
                                <div class="auth-form-note mt-2 mb-0">
                                    <div class="auth-form-note-icon"><i class="bi bi-stars"></i></div>
                                    <div>
                                        <div class="fw-bold mb-1">Déjà membre ?</div>
                                        <p class="mb-0 text-muted">Connectez-vous à votre espace en quelques secondes.</p>
                                        <a href="{{ path('fos_user_security_login') }}" class="auth-switch-link mt-2 d-inline-flex">Se connecter</a>
                                    </div>
                                </div>
                            </div>

                            {{ form_widget(form._token) }}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}