<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Créer une partie</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
        <style>
            p,
            label {
                font:
                        1rem 'Fira Sans',
                        sans-serif;
            }

            input {
                margin: 0.4rem;
            }
        </style>
    </head>
    <body>
        <h1>Créer une partie</h1>

        <br><br><br>

        <center>
            <p>Pour créer voter partie, merci de faire vos choix et de cliquer sur valider</p>
            <form action="validationFormulaire" method="post">
                <fieldset>
                    <legend>Mini-jeux disponibles</legend>
                    {% if dVueErreur|length > 0 %}
                        <div>
                            <h5>Erreur : </h5>
                            {% for erreur in dVueErreur %}
                                <p>{{erreur}}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                    {% if dVueCreate is defined %}
                            {% if dVueCreate["jeux"] is defined %}
                            {% for value in dVueCreate["jeux"] %}
                                <div>
                                    <input required type="radio" name="jeu" id="{{value['id']}}" value="{{value['id']}}">
                                    <label for="{{value['id']}}">{{value['nom']}}</label>
                                </div>
                            {% endfor %}
                        {% endif %}
                </fieldset>
                
                            {% if dVueCreate["difficultes"] is defined %}
                <label for="difficulte">Difficulté</label>
                <select required name="difficulte" id="difficulte">
                                {% for diff in dVueCreate["difficultes"] %}
                                    <option value="{{diff['id']}}">{{diff['libelle']}}</option>
                                {% endfor %}
                </select>
                            {% endif %}

                <input type="submit" value="Valider">
                {% endif %}

            </form>
        </center>

        <script src="../js/bootstrap.min.js"></script>
    </body>
</html>