<!DOCTYPE html>
<html lang="en">
<head>    
    <link rel="stylesheet" href="/styles.css">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
  </head>
</head>
<body>

{{!-- Navigation links --}}
    <nav>
        <a href="/"><h4>Accueil</h4></a>
    </nav>

    <div class="container mt-4">
        <div class="card" style="width: 40rem;">            
            <div class="card-header">Veuillez vous enregistrer</div>    
            <div class="card-body">
                <form action="/auth/register" method="POST">
                    
                    <div class="mb-3 inline-flex">
                        <input type="radio" id="male" name="gender" value="M">
                        <label for="male">Monsieur</label>
                        <span style="width: 80px; display: inline-flex">&nbsp;</span>
                        <input type="radio" id="female" name="gender" value="F">
                        <label for="female">Madame</label>
                    </div>
                    
                    <div class="mb-3">
                        <label for="name-reg" class="form-label">Nom</label>
                        <input type="text" class="form-control" id="name-reg" name="name">                        
                    </div>
                    <div class="mb-3">
                        <label for="firstname-reg" class="form-label">Prénom</label>
                        <input type="text" class="form-control" id="firstname-reg" name="firstname">                        
                    </div>
                    <div class="mb-3">
                        <label for="email-reg" class="form-label">Adresse email *</label>
                        <input type="text" class="form-control" id="email-reg" name="email" required="true">                        
                    </div>
                     <div class="mb-3">
                        <label for="dob-reg" class="form-label">Date de naissance</label>
                        <input type="date" class="form-control-sm" id="dob-reg" name="dob">                        
                    </div>
                      <div class="mb-3">
                        <label for="title-reg" class="form-label">Titre / fonction</label>
                        <input type="text" class="form-control" id="title-reg" name="title">                        
                    </div>
                    <div class="mb-3">
                        <label for="password-reg" class="form-label">Mot de passe *</label>
                        <input type="password" class="form-control-sm" id="password-reg" name="password" required="true">
                    </div>
                    <div class="mb-3">
                        <label for="password-conf-reg" class="form-label">Confirmez votre mot de passe *</label>
                        <input type="password" class="form-control-sm" id="password-conf-reg" name="password_confirm" required="true">
                    </div>

                    <button type="submit" class="btn btn-primary">M'enregistrer</button>
                </form>
            </div>
            <a href="/">Déjà inscrit ? Cliquez ici pour vous connecter.</a>
        </div>

        {{#if error }}
            <h4 class="alert alert-danger mt-4">{{error}}</h4>
        {{/if}}

    </div>

</body>
</html>