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

{% block title %}Créer un compte | Izibrick{% endblock %}

{% block stylesheets %}
<style>
    .register-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: relative;
        overflow: hidden;
    }

    .register-decorative-shape {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
    }

    .register-shape-1 {
        width: 300px;
        height: 300px;
        top: -100px;
        right: -100px;
        animation: float 8s ease-in-out infinite;
    }

    .register-shape-2 {
        width: 200px;
        height: 200px;
        bottom: -50px;
        left: -50px;
        animation: float 10s ease-in-out infinite reverse;
    }

    .register-shape-3 {
        width: 150px;
        height: 150px;
        top: 50%;
        left: 10%;
        animation: float 12s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(10deg); }
    }

    .register-card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .register-input-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #667eea;
    }

    .register-input-with-icon {
        padding-left: 45px;
    }

    .register-card:hover {
        transform: translateY(-5px);
        transition: transform 0.3s ease;
    }
</style>
{% endblock %}

{% block body %}
<div class="register-container">
    {# Decorative shapes #}
    <div class="register-decorative-shape register-shape-1"></div>
    <div class="register-decorative-shape register-shape-2"></div>
    <div class="register-decorative-shape register-shape-3"></div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-7">
                <div class="card register-card border-0 shadow-lg rounded-4" style="transition: transform 0.3s;">
                    {# Header with Logo #}
                    <div class="card-header border-0 bg-transparent text-center pt-5 pb-0">
                        <div class="mb-4">
                            <img src="{{ asset('assets/img/logo/logo-izibrick.png') }}" alt="izibrick" style="width: 70px; height: 70px;">
                        </div>
                        <h2 class="fw-bold mb-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                            Créer un compte
                        </h2>
                        <p class="text-muted mb-0">Rejoignez Izibrick et créez votre site</p>
                    </div>

                    {# Card Body #}
                    <div class="card-body p-5">
                        {% if error is defined %}
                            <div class="alert alert-danger d-flex align-items-center rounded-3 mb-4" role="alert">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <div>{{ error }}</div>
                            </div>
                        {% endif %}

                        {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}

                            {# Email Input #}
                            <div class="mb-4">
                                <label for="{{ form.email.vars.id }}" class="form-label fw-semibold">
                                    <i class="fas fa-envelope me-2" style="color: #667eea;"></i>Email
                                </label>
                                <div class="position-relative">
                                    <i class="fas fa-user register-input-icon"></i>
                                    {{ form_widget(form.email, {
                                        'attr': {
                                            'class': 'form-control form-control-lg register-input-with-icon rounded-3',
                                            'placeholder': 'votre@email.com'
                                        }
                                    }) }}
                                </div>
                                {{ form_errors(form.email) }}
                            </div>

                            {# Password Input #}
                            <div class="mb-4">
                                <label for="{{ form.plainPassword.first.vars.id }}" class="form-label fw-semibold">
                                    <i class="fas fa-lock me-2" style="color: #667eea;"></i>Mot de passe
                                </label>
                                <div class="position-relative">
                                    <i class="fas fa-key register-input-icon"></i>
                                    {{ form_widget(form.plainPassword.first, {
                                        'attr': {
                                            'class': 'form-control form-control-lg register-input-with-icon rounded-3',
                                            'placeholder': '••••••••'
                                        }
                                    }) }}
                                </div>
                                {{ form_errors(form.plainPassword.first) }}
                            </div>

                            {# Confirm Password Input #}
                            <div class="mb-4">
                                <label for="{{ form.plainPassword.second.vars.id }}" class="form-label fw-semibold">
                                    <i class="fas fa-lock me-2" style="color: #667eea;"></i>Confirmer le mot de passe
                                </label>
                                <div class="position-relative">
                                    <i class="fas fa-key register-input-icon"></i>
                                    {{ form_widget(form.plainPassword.second, {
                                        'attr': {
                                            'class': 'form-control form-control-lg register-input-with-icon rounded-3',
                                            'placeholder': '••••••••'
                                        }
                                    }) }}
                                </div>
                                {{ form_errors(form.plainPassword.second) }}
                            </div>

                            {# CAPTCHA - Vérification Anti-Robot #}
                            <div class="mb-4">
                                <div class="captcha-box p-4 rounded-3" style="background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%); border: 2px solid #667eea;">
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="captcha-icon me-3" style="font-size: 32px;">🤖</div>
                                        <div>
                                            <h6 class="mb-0 fw-bold" style="color: #667eea;">Vérification anti-robot</h6>
                                            <small class="text-muted">Pour protéger notre service</small>
                                        </div>
                                    </div>

                                    <label for="{{ form.captcha.vars.id }}" class="form-label fw-semibold" style="color: #4a5568;">
                                        <i class="fas fa-calculator me-2" style="color: #667eea;"></i>{{ form.captcha.vars.label }}
                                    </label>
                                    <div class="position-relative">
                                        <i class="fas fa-hashtag register-input-icon" style="color: #667eea;"></i>
                                        {{ form_widget(form.captcha, {
                                            'attr': {
                                                'class': 'form-control form-control-lg register-input-with-icon rounded-3',
                                                'style': 'border-color: #667eea; background: white;'
                                            }
                                        }) }}
                                    </div>
                                    {{ form_errors(form.captcha) }}

                                    <small class="text-muted mt-2 d-block">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Résolvez cette simple opération pour continuer
                                    </small>
                                </div>
                            </div>

                            {# CGU Checkbox #}
                            <div class="mb-4">
                                <div class="form-check">
                                    {{ form_widget(form.cgu, {
                                        'attr': {
                                            'class': 'form-check-input',
                                            'style': 'border-color: #667eea;'
                                        }
                                    }) }}
                                    <label class="form-check-label text-muted" for="{{ form.cgu.vars.id }}">
                                        J'accepte les <a href="{{ path('cgu') }}" target="_blank" class="text-decoration-none">conditions générales d'utilisation</a>
                                    </label>
                                </div>
                                {{ form_errors(form.cgu) }}
                            </div>

                            {# Hidden siteId field #}
                            {{ form_widget(form.siteId) }}

                            {# Submit Button #}
                            <button type="submit" class="btn btn-lg w-100 text-white fw-semibold rounded-pill mb-3 py-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
                                <i class="fas fa-user-plus me-2"></i>Créer mon compte
                            </button>

                            {# Divider #}
                            <div class="text-center my-4">
                                <span class="text-muted small">ou</span>
                            </div>

                            {# Login Link #}
                            <div class="text-center">
                                <p class="text-muted mb-2">Vous avez déjà un compte ?</p>
                                <a href="{{ path('app_login') }}" class="btn btn-outline-primary btn-lg w-100 rounded-pill fw-semibold">
                                    <i class="fas fa-sign-in-alt me-2"></i>Se connecter
                                </a>
                            </div>

                        {{ form_end(form) }}
                    </div>

                    {# Footer #}
                    <div class="card-footer border-0 bg-transparent text-center pb-4">
                        <small class="text-muted">
                            <i class="fas fa-shield-alt me-1"></i>
                            Inscription sécurisée SSL
                        </small>
                    </div>
                </div>

                {# Back to Home Link #}
                <div class="text-center mt-4">
                    <a href="{{ path('index') }}" class="text-white text-decoration-none">
                        <i class="fas fa-arrow-left me-2"></i>Retour à l'accueil
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add hover effect to register card
        const card = document.querySelector('.register-card');
        if (card) {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-10px)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        }

        // Focus effect on inputs
        const inputs = document.querySelectorAll('.register-input-with-icon');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                const icon = this.parentElement.querySelector('.register-input-icon');
                if (icon) {
                    icon.style.color = '#667eea';
                }
            });
            input.addEventListener('blur', function() {
                const icon = this.parentElement.querySelector('.register-input-icon');
                if (icon) {
                    icon.style.color = '#999';
                }
            });
        });
    });
</script>
{% endblock %}