<!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>Projet MIA</h4></a>
    </nav>

   <div class="container mt-4">
        <div class="card" style="width: 30rem;">            
            <div class="card-header">1 - Choix de la session</div>    
            <div class="card-body">
                <form action="/auth/check-session" method="POST">
                    <div class="mb-3">
                        <label for="session-reg" class="form-label">Session *</label>
                        <select name="session" id="session-reg" required="true" class="form-control">
                            <option value="" disabled selected>Choisissez la session</option>
                            {{#each select}}
                            <option value="{{this.ID}}">{{this.topic}} (planifiée le {{this.date}} à {{this.heure}})</option>
                            {{/each}}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="session-pass-reg" class="form-label">Mot de passe de la session *</label>
                        <input type="password" class="form-control" id="session-pass-reg" name="session_password" required="true">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Votre rôle sur cette session *</label>
                        <br>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="role" id="role-1" value="P">
                            <label class="form-check-label" for="role-1">Présentateur</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="role" id="role-2" value="A" checked>
                            <label class="form-check-label" for="role-2">Auditeur</label>
                        </div>
                    </div>  
                    <br>                      
                    <button type="submit" class="btn btn-primary">Valider la session</button>
                </form>
            </div>
        </div>
        {{#if error }}
            <h4 class="alert alert-danger mt-4">{{error}}</h4>
        {{/if}}
    </div>

</body>
</html>