{extends file="views/layout.tpl"}

{block name="content"}
<section aria-label="Se connecter">
    {* Affichage des erreurs *}
    {if $arrError|count > 0}
        <div class="alert alert-danger">
            {foreach from=$arrError item=strError}
                <p>{$strError}</p>
            {/foreach}
        </div>
    {/if}
<!-- Contenu principal de la page -->
<main class="container py-5">

    <!-- Centrage horizontal du formulaire -->
    <div class="row justify-content-center">
    <!-- Contenu principal de la page -->
    <main class="container py-5">

        <!-- Centrage horizontal du formulaire -->
        <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-5">

            <!-- Carte contenant le formulaire de connexion -->
            <div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">

            <!-- Titre principal -->
            <h1 class="h3 fw-bold mb-1">Connexion</h1>

            <!-- Texte descriptif -->
            <p class="text-secondary mb-4">
                Connectez-vous à votre compte.
            </p>

            <!-- Formulaire de connexion -->
            <!-- Le traitement sera effectué en PHP via la méthode POST -->
            <form method="POST">

                <div class="row g-3">

                <!-- Champ : adresse e-mail de l'utilisateur -->
                <div class="col-12">
                    <label for="user_mail" class="form-label">
                        Adresse e-mail
                    </label>
                    <input
                        value="{$strMail|default:''}" 
                        type="email"
                        class="form-control {if isset($arrError.mail)}is-invalid{/if}"
                        id="user_mail"
                        name="user_mail"
                        required
                       
                    >
                </div>

                <!-- Champ : mot de passe -->
                <div class="col-12">
                    <label for="user_password" class="form-label">
                        Mot de passe
                    </label>
                    <input
                        type="password"
                        class="form-control {if isset($arrError.pwd)}is-invalid{/if}"
                        id="user_password"
                        name="user_password"
                        required
                      
                    >
                </div>

                <!-- Option "Se souvenir de moi" (fonctionnalité optionnelle côté PHP) -->
                <div class="col-12">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="remember_me" name="remember_me">
                        <label class="form-check-label" for="remember_me">
                            Se souvenir de moi
                        </label>
                    </div>
                </div>

                <!-- Bouton de soumission du formulaire -->
                <div class="col-12 d-grid mt-2">
                    <button type="submit" class="btn btn-primary btn-lg rounded-3">
                        Se connecter
                    </button>
                </div>

                <!-- Lien vers la page d'inscription -->
                <div class="col-12 text-center">
                    <small class="text-secondary">
                        Pas encore de compte ?
                        <a href="index.php?ctrl=user&action=signin" class="link-primary">Créer un compte</a>
                    </small>
                </div>

                <!-- Lien pour la récupération du mot de passe -->
                <div class="col-12 text-center">
                    <small>
                        <a href="#" class="link-primary">
                            Mot de passe oublié ?
                        </a>
                    </small>
                </div>

                </div>
            </form>

            </div>

        </div>
        </div>
</main>
</section>
{/block}