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

{% block title %}Vérifiez votre email | Izibrick{% endblock %}

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

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

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

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

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

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

    .email-icon {
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 30px;
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    .email-icon i {
        font-size: 50px;
        color: white;
    }
</style>
{% endblock %}

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

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">
                <div class="card check-email-card border-0 shadow-lg rounded-4">
                    <div class="card-body text-center p-5">
                        {# Email Icon #}
                        <div class="email-icon">
                            <i class="fas fa-envelope-open"></i>
                        </div>

                        {# Title #}
                        <h2 class="fw-bold mb-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
                            Vérifiez votre email
                        </h2>

                        {# Message #}
                        <p class="text-muted mb-4 fs-5">
                            Un email de confirmation a été envoyé à votre adresse.
                        </p>

                        <div class="alert alert-info d-flex align-items-start rounded-3" role="alert">
                            <i class="fas fa-info-circle me-3 mt-1" style="color: #667eea; font-size: 24px;"></i>
                            <div class="text-start">
                                <p class="mb-2">
                                    <strong>Prochaines étapes :</strong>
                                </p>
                                <ol class="mb-0 ps-3">
                                    <li>Ouvrez votre boîte de réception</li>
                                    <li>Recherchez l'email de confirmation Izibrick</li>
                                    <li>Cliquez sur le lien de confirmation</li>
                                    <li>Votre compte sera activé et vous pourrez vous connecter</li>
                                </ol>
                            </div>
                        </div>

                        <div class="mt-4 p-3 bg-light rounded-3">
                            <small class="text-muted">
                                <i class="fas fa-question-circle me-1"></i>
                                Vous n'avez pas reçu l'email ? Vérifiez votre dossier spam ou contactez le support.
                            </small>
                        </div>

                        {# Action Buttons #}
                        <div class="mt-5">
                            <a href="{{ path('app_login') }}" class="btn btn-lg btn-outline-primary rounded-pill px-5">
                                <i class="fas fa-sign-in-alt me-2"></i>Aller à la connexion
                            </a>
                        </div>
                    </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>
{% endblock %}