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

<head>
    <meta charset="UTF-8">
    <title>Math'Educ</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/global.css">
</head>

<body id="bodyStyle">
    <div class="container-fluid text-center pt-5" style="height:85vh;">
        <form class="row g-3 needs-validation w-100" action="traitementAjout.php" method="post" novalidate>
            <div class="container fs-2">
                <label for="question" class="form-label">Question:</label>
                <textarea class="form-control fs-2" id="question" name="question" rows="4" cols="50" style="resize: none; text-align: center"required></textarea>
                <div class="invalid-feedback">
                    Please provide a valid question.
                </div>
            </div>
            <div class="container fs-2 pt-5">
                <div class="row">
                    <div class="col">
                        <label for="reponse1" class="form-label">Réponse 1:</label>
                        <input id="reponse1" name="reponse1" rows="1" required></input>
                        <div class="invalid-feedback">
                            Please provide a valid answer.
                        </div>
                    </div>
                    <div class="col">
                        <label for="reponse2" class="form-label">Réponse 2:</label>
                        <input id="reponse2" name="reponse2" rows="1" required></input>
                        <div class="invalid-feedback">
                            Please provide a valid answer.
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <label for="reponse3" class="form-label">Réponse 3:</label>
                        <input id="reponse3" name="reponse3" rows="1" required></input>
                        <div class="invalid-feedback">
                            Please provide a valid answer.
                        </div>
                    </div>
                    <div class="col">
                        <label for="reponse4" class="form-label">Réponse 4:</label>
                        <input id="reponse4" name="reponse4" rows="1" required></input>
                        <div class="invalid-feedback">
                            Please provide a valid answer.
                        </div>
                    </div>
                </div>
                <div class="pt-5">
                    <label for="theme" class="form-label">Themes</label>
                    <select id="theme" name="theme" required>
                    <option selected disabled value=""></option>
                    <option>Theme1</option>
                    <option>Theme2</option>
                    <option>Theme3</option>
                    </select>
                    <div class="invalid-feedback">
                        Please select a valid theme.
                    </div>
                
                </div>
                <input class="m-5" type="submit" value="ajouter" style="background-color:green;">
            </div>
        </form>
    </div>
    <script src="js/script.js"></script>
</body>

</html>