{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}