<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
    <!-- jquery is not required for the picker to work-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
    <link rel="stylesheet" href="/styles.css">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font awesome is not required provided you change the icon options -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/solid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/fontawesome.min.js"></script>
    <!-- end FA -->
    <script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/tempus-dominus.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/jQuery-provider.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/css/tempus-dominus.css" />
    <script type="module" src="/scripts.js"></script>
  </head>
</head>
<body>

{{!-- Navigation links --}}
    <nav>
        <a href="/"><h4>Projet MIA</h4></a>
    </nav>
    <div class="container mt-4">
        <div class="card" style="width: 40rem;">            
            <div class="card-header">Création d'une nouvelle session</div>    
            <div class="card-body">
                <form action="/record-session" method="POST">
                    <div class="mb-3">
                        <label for="topic-reg" class="form-label">Intitulé *</label>
                        <input type="text" class="form-control" id="topic-reg" name="topic" required>                        
                    </div>
                    <div class="mb-3">
                        <label for="datetimepicker1Input" class="form-label">Date prévisionnelle de début *</label>
                        <div class="input-group log-event" id="datetimepicker1" data-td-target-input="nearest" data-td-target-toggle="nearest">
                            <input id="datetimepicker1Input" type="text" class="form-control-sm" data-td-target="#datetimepicker1" name="datetimepicker1Input" required />
                            <span class="input-group-text" data-td-target="#datetimepicker1" data-td-toggle="datetimepicker">
                                <i class="fas fa-calendar"></i>
                            </span>
                        </div>
                    </div>
                    </div>
                    <div class="mb-3">
                        <label for="attended-reg" class="form-label">Nombre de participants maximum</label>
                        <input type="text" class="form-control-sm" id="attended-reg" name="attended">                        
                    </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">Enregistrer la session</button>
                </form>
            </div>
        </div>

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

    </div>
</body>
</html>