@extends('front.layouts.base')

@section('content')
    <div class="section section-padding bg-dark">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-12 text-center text-lg-start">
                    <div class="text-center section-title shape" data-aos="fade-up" data-aos-delay="200">
                        <span class="text-white modal-title h2 text-bebas w-100 d-inline-block" id="modal-verify-emailLabel">
                            Vérification de l'email
                        </span>
                    </div>
                    <div class="p-5 bg-secondary border-radius-default row" data-aos="fade-up" data-aos-delay="200">
                        <div class="mx-auto col-lg-8 col-12">
                            <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
                                Merci de vous être inscrit ! Pourriez-vous vérifier votre adresse email en cliquant sur le
                                lien que nous venons de vous envoyer ? Si vous n'avez pas reçu l'email, peut-être que vous
                                l'avez dans vos spams.
                            </div>

                            @if (session('status') == 'verification-link-sent')
                                <div class="mb-4 font-medium text-success text-sm">
                                    Un nouveau lien de vérification a été envoyé à l'adresse email que vous avez fournie
                                    lors de l'inscription.
                                </div>
                            @endif

                            <form method="POST" action="{{ route('verification.send') }}">
                                @csrf
                                <button class="btn btn-primary btn-hover-primary mt-4 mb-2 w-100">
                                    Renvoyer l'email
                                </button>
                            </form>

                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit"
                                    class="btn btn-secondary btn-outline-primary btn-hover-secondary mt-4 w-100">
                                    Se déconnecter
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-12 text-center text-lg-start mt-5 mt-lg-0">
                    <div class="text-center section-title shape" data-aos="fade-up" data-aos-delay="200">
                        <span class="text-white modal-title h2 text-bebas w-100 d-inline-block"
                            id="modal-verify-emailLabel">
                            Pourquoi vérifier votre email ?
                        </span>
                    </div>
                    <div class="d-flex flex-column align-items-center align-items-lg-start">
                        <div class="mb-4 d-flex align-items-center">
                            <div class="icon-box bg-secondary p-3 me-3">
                                <i class="fal fa-envelope text-white"></i>
                            </div>
                            <span class="text-bebas desc-modal-title">ASSUREZ-VOUS DE RECEVOIR TOUTES NOS COMMUNICATIONS
                                IMPORTANTES</span>
                        </div>
                        <div class="mb-4 d-flex align-items-center">
                            <div class="icon-box bg-secondary p-3 me-3">
                                <i class="fal fa-shield-check text-white"></i>
                            </div>
                            <span class="text-bebas desc-modal-title">PROTÉGEZ VOTRE COMPTE ET VOS INFORMATIONS
                                PERSONNELLES</span>
                        </div>
                        <div class="mt-3 text-center text-lg-start">
                            <p>
                                La confidentialité de vos données personnelles est une priorité. <br
                                    class="d-lg-block d-none">
                                Vos informations sont en sécurité et ne seront utilisées que pour assurer le bon
                                déroulement de votre expérience utilisateur.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection