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

{block name="content"}
<main class="container py-5">
    <div class="row justify-content-center position-relative">
        <div class="col-12 col-md-10 col-lg-6">
            <div class="card shadow-sm border-0 rounded-4 p-4 p-lg-5">
                <h1 class="h3 fw-bold mb-1">Inscription</h1>
                <p class="text-secondary mb-4">Créez votre compte utilisateur.</p>
                {if (isset($arrError) && count($arrError) > 0) }
	            	<div class="alert alert-danger">
	            	{foreach $arrError as $strError}
	            		<p>{$strError}</p>
	            	{/foreach}
	            	</div>
	            {/if}

                <form method="POST">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" for="user_firstname">
                                                    Prénom *
                            </label>
                            <input
                                                    class="form-control"
                                                    type="text"
                                                    id="user_firstname"
                                                    name="user_firstname"
                                                    required >
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" for="user_name">
                                                    Nom *
                            </label>
                            <input
                                                    class="form-control"
                                                    type="text"
                                                    id="user_name"
                                                    name="user_name"
                                                    required>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="user_pseudo">
                                                    Pseudo *
                            </label>
                            <div class="input-group">
                            <span class="input-group-text">@</span>
                            <input
                                                        class="form-control"
                                                        type="text"
                                                        id="user_pseudo"
                                                        name="user_pseudo"
                                                        required
                            >
                        </div>
                    </div>

                                    <!-- Champ : adresse e-mail -->
                    <div class="col-12">
                        <label class="form-label" for="user_mail">
                                                Adresse e-mail *
                        </label>
                        <input
                                                class="form-control"
                                                type="email"
                                                id="user_mail"
                                                name="user_mail"
                                                required
                        >
                    </div>

                                    <!-- Champ : mot de passe -->
                    <div class="col-12">
                        <label class="form-label" for="user_password">
                                                Mot de passe *
                        </label>
                        <input
                                                class="form-control"
                                                type="password"
                                                id="user_password"
                                                name="user_password"
                                                required
                        >
                        <div class="mt-2 small text-muted">
                            <p class="mb-1">Le mot de passe doit contenir :</p>
                            <ul class="mb-0 ps-3">
                                <li>Au moins <strong>15 caractères</strong></li>
                                <li>Au moins <strong>une lettre majuscule</strong></li>
                                <li>Au moins <strong>une lettre minuscule</strong></li>
                                <li>Au moins <strong>un chiffre</strong></li>
                                <li>Au moins <strong>un caractère spécial</strong> (# ? ! @ $ % ^ & * -)</li>
                            </ul>
                        </div>
                    </div>
                                <!-- Champ : confirmer le mot de passe -->
                    <div class="col-12">
                        <label class="form-label" for="pwd_confirm">
                                                Confirmer le Mot de passe *
                        </label>
                        <input
                                                class="form-control"
                                                type="password"
                                                id="pwd_confirm"
                                                name="pwd_confirm"
                                                required
                        >
                    </div>

                                    <!-- Champ optionnel : numéro de téléphone -->
                    <div class="col-12">
                        <label class="form-label" for="user_phone">
                                                Téléphone
                        </label>
                        <input
                                                class="form-control"
                                                type="text"
                                                id="user_phone"
                                                name="user_phone"
                        >
                    </div>

                                    <!-- Champ optionnel : profession de l'utilisateur -->
                    <div class="col-12">
                        <label class="form-label" for="user_work">
                                                Profession
                        </label>
                        <input
                                                class="form-control"
                                                type="text"
                                                id="user_work"
                                                name="user_work"
                        >
                    </div>

                                    <!-- Champ optionnel : localisation de l'utilisateur -->
                    <div class="col-12">
                        <label class="form-label" for="user_location">
                                                Localisation
                        </label>
                        <input
                                                class="form-control"
                                                type="text"
                                                id="user_location"
                                                name="user_location"
                        >
                    </div>

                                    <!-- Champ optionnel : phrase d'accroche  -->
                    <div class="col-12">
                        <label class="form-label" for="user_description">
                                                Phrase d'accroche
                        </label>
                        <textarea
                                                class="form-control"
                                                id="user_description"
                                                name="user_description"
                                                rows="3"
                        ></textarea>
                    </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">
                                                Créer mon compte
                        </button>
                        </div>

                                        <!-- Lien vers la page de connexion -->
                        <div class="col-12 text-center">
                        <small class="text-secondary">
                                                Déjà un compte ?
                        <a href="index.php?ctrl=user&action=login">Se connecter</a>
                        </small>
                    </div>
                </form>

            </div>
                

        </div>

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