<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Maths Educ</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/global.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
        
    </head>

    <body id="bodyStyle">
        <form action="/verifySingleplayer" method="post">
            <div class="text-center" style="padding-top: 30vh">
                <h1 style="color: white; font-size: 50px">Difficulte :</h1>
                <input type="radio" class="btn-check" name="difficulty" id="Facile" value="1">
                <label class="btn btn-outline-success fs-1" for="Facile" style="margin-right: 20px">Facile</label>

                <input type="radio" class="btn-check" name="difficulty" id="Moyen" value="2">
                <label class="btn btn-outline-warning fs-1" for="Moyen" style="margin-right: 20px">Moyen</label>

                <input type="radio" class="btn-check" name="difficulty" id="Difficile" value="3">
                <label class="btn btn-outline-danger fs-1" for="Difficile">Difficile</label>

            </div>
            

            <div class="dropdown d-flex flex-column align-items-center p-5">
                {% for chapter in chapters %}
                    <input type="radio" class="btn-check" name="chapter" id="{{ chapter.name }}" value="{{ chapter.id }}">
                    <label class="btn btn-outline-warning fs-1" for="{{ chapter.name }}">{{ chapter.name }}</label>
                {% endfor %}
            </div>

            <div class="d-flex flex-column align-items-center">
                <button type="submit" class="btn btn-success btn-lg fs-1" >Jouer</button>
            </div>
        </form>
    </body>
</html>