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

{% block body %}
<div id="carouselLoginIndicators" class="carousel carousel-dark slide">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselLoginIndicators" data-bs-slide-to="0" class="text-dark active"
            aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselLoginIndicators" data-bs-slide-to="1" class="text-dark"
            aria-label="Slide 2"></button> 
    </div>
    <div class="carousel-inner text-center">
        <div class="carousel-item active">
            <section class="d-flex flex-column justify-content-center page p-4">
                <div>
                    <div class="text-center my-4">
                        <img width="300" src="{{asset('images/FC-badge.png')}}" alt="France clean">
                    </div>
                    <h1 class="text-primary my-4">Simplify Cleaning, Amplify Shine – With Us!</h1>
                </div>
                <div>
                    <p>🇫🇷 Bienvenue ! Nous sommes ravis de vous accueillir. ✨</p>
                    <p>🇬🇧 Welcome ! We’re thrilled to have you on board. ✨</p>
                </div>
                <div>
                    <p>Sélectionnez une langue Select a language </p>
                    <twig:SwitchLangage />
                    <p>thème</p>
                    <twig:SwitchTheme />
                </div>
            </section>
        </div>
        <div class="carousel-item">
            <section class="d-flex flex-column justify-content-center page p-4">
                <div class="text-center">
                    <img class="w-100" src="{{asset('images/presentation_mobile.png')}}"
                        alt="clean my room application">
                </div>
                <h1 class="text-primary">Réservez un créneau en un clin d'œil !</h1>
                <p class="col-10 mx-auto">En quelques étapes, vous choisissez votre forfait, sélectionnes un créneau et
                    le tour est joué ! </p>
            </section>
        </div>
        <div class="position-fixed bottom-0 w-100 mb-4 pb-4">
            <div class="col-10 mx-auto d-flex">
                <a href="{{path('app_register')}}" class="btn btn-light  w-100">{{ "btn.register"|trans }}</a>
                <a href="{{path('app_login')}}" class="btn btn-light active w-100">{{ "btn.login"|trans }}</a>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev text-dark" type="button" data-bs-target="#carouselLoginIndicators"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="">
            < </span>
    </button>
    <button class="carousel-control-next text-dark" type="button" data-bs-target="#carouselLoginIndicators"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class=""> > </span>
    </button>
</div>
{% endblock %}