<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset=utf-8>
    <title>Math'Educ</title>
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/chrono.css">
    <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">
    <div id="chrono" class="container mx-5 my-4 position-relative">
        <div id="centre"></div>
        <div id="aiguille-container">
            <div id="aiguille" class="aiguille"></div>
        </div>
        <div id="fond"></div>
    </div>
    
    <div class="container text-center text-white">
        <div class="container border border-white rounded mt-5">
            <p class="fs-2">
                {{ questions[numQuestion]['content'] }}
            <br>
                Question n° : {{ numQuestion+1 }}/10
            </p>
        </div>
        <form action="/verifQuestion" method="post">
        {# Awfull Code but it's valided by the 6ème membre #}
            <input type="hidden" name="numQuestion" value="{{ numQuestion }}">
            <input type="hidden" name="questions" value="{{ jsonQuestions|e('html_attr') }}">
        {# End of Awfull Code #}
            <div class="row g-5">
                <div class="col pt-5">
                    <input type="radio" class="btn-check" name="answer" value="0" id="answer1" autocomplete="off">
                    <label class="btn fs-2 container text-white" for="answer1" style="background-color:blue;">
                        {{ questions[numQuestion].answers[0].content }}
                    </label>
                </div>
                <div class="col pt-5">
                    <input type="radio" class="btn-check" name="answer" value="1" id="answer2" autocomplete="off">
                    <label class="btn fs-2 container text-white" for="answer2" style="background-color:green;">
                        {{ questions[numQuestion]['answers'][1]['content'] }}
                    </label>
                </div>
            </div>
            <div class="row g-5">
                <div class="col pt-5">
                    <input type="radio" class="btn-check" name="answer" value="2" id="answer3" autocomplete="off">
                    <label class="btn fs-2 container text-white" for="answer3" style="background-color:red;">
                        {{ questions[numQuestion]['answers'][2]['content'] }}
                    </label>
                </div>
                <div class="col pt-5">
                    <input type="radio" class="btn-check" name="answer" value="3" id="answer4" autocomplete="off">
                    <label class="btn fs-2 container text-white" for="answer4" style="background-color:orange;">
                        {{ questions[numQuestion]['answers'][3]['content'] }}
                    </label>
                </div>
            </div>
            
            <div class="row justify-content-center">
                <div class="col-1 pt-5">
                    <button type="submit" class="fs-2 btn btn-danger btn-lg">
                        Passer 
                        {# Si qql peut regarder pr que passer ne passe pas par la fonction verifQuestion mais par une autre #}
                    </button>
                </div>
                <div class="col-1 pt-5">
                    <button type="submit" class="fs-2 btn btn-success btn-lg">
                        Valider
                    </button>
                </div>
            </div>
        </form>
    </div>
    <script type="module" src="js/scriptChrono.js"></script>
</body>
</html>