{% if jeu %}

<div id="jeu">
    <form id="form1" name="form1"  method="post">
        <input type='hidden' name='id_jeux' value='{{ jeu }}'>
        <div id="containerjeu">
                {% for question in questions %}
                    <fieldset>
                    <legend>{{ loop.index }} - {{ question.libQuestion }}</legend>
                        {% for reponse in question.reponse %}
                        <div class="radio">
                            <label for="reponse{{ question.idQuestion }}{{ reponse.lettre }}">
                                <input type="radio" id="reponse{{ question.idQuestion }}{{ reponse.lettre }}" value="{{ reponse.lettre }}"
                                name="reponse{{ question.idQuestion }}"
                                {% if loop.index == 1%}
                                    checked
                                {% endif %}
                                >{{ reponse.libelle_reponse }}
                            </label>
                            </div>
                        {% endfor %}
                    </fieldset>
                {% endfor %}
        </div>
        <hr/>
        <fieldset>
            <legend>Vos coordonnées</legend>
                <div class="form-group">
                    <label for="nom" id="nom-coordonnee">Nom*</label>
                        <div class="row">
                            <div class="col-sm-3">
                                <label for="civilite" class="sr-only">Civilité</label>
                                <select class="form-control" name="civilite" id="civilite">
                                    <option value="Mme">Mme</option>
                                    <option value="Mlle">Mlle</option>
                                    <option value="M.">M.</option>
                                </select>
                            </div>
                            <div class="col-sm-9">
                                <input class="form-control" type="text" name="nom" id="nom"  value=""/>
                            </div>
                        </div>
                </div>

                <div class="form-group">
                    <label for="prenom">Prénom*</label>
                        <input class="form-control" type="text" name="prenom" id="prenom" value=""/>

                </div>

                <div class="form-group">
                    <label for="adresse">Adresse* </label>

                        <input class="form-control" type="text" name="adresse" id="adresse"  value="" />

                </div>

                        <div class="row">
                            <div class="col-sm-3">
                <div class="form-group">
                    <label  for="cp">Code postal*</label>


                        <input class="form-control" type="text" name="cp" id="cp"  value="" />

                </div>
                            </div>
                            <div class="col-sm-9">

                <div class="form-group">
                    <label  for="ville">Ville*</label>


                        <input class="form-control" type="text" name="ville" id="ville"  value="" />
</div>                </div></div>
                <div class="form-group">
                    <label  for="tel">Téléphone</label>

                        <input class="form-control" type="text" name="tel" id="tel"  value="" />
                </div>                

                <div class="form-group">
                    <label  for="mail">Mail*</label>
                        <input class="form-control" type="email" name="mail" id="mail"  value="" />
                </div>

        <div class="checkbox">
                        <label >
                            <input type="checkbox" name="newsletter" id="checkbox" value="1"/>
                            Vous souhaitez être informé de l'actualité du réseau
                        </label>
                    </div>

        </fieldset>
        <div class="row">
            <div class="col-md-6">
                {{ CaptchaService.htmlCaptcha|raw }}
            </div>
            <div class="col-md-6">
                <a href="javascript:verifperso()" class="btn btn-primary btn-lg btn-block">
                    Valider
                </a>
            </div>
        </div>
    </form>
</div>
<script nonce="{{ ContentSecurityPolicyNonceService.nonce }}" type="text/javascript">
    function verifperso(){
        if(document.form1.mail.value===""){
            alert("Entrez votre adresse email");
            document.form1.mail.focus();
        }else{
            if(document.form1.nom.value===""){
                alert("Entrez votre nom");
                document.form1.nom.focus();
            }else{
                if(document.form1.prenom.value===""){
                    alert("Entrez votre prénom");
                    document.form1.prenom.focus();
                }else{
                    if(document.form1.adresse.value===""){
                        alert("Entrez votre adresse");
                        document.form1.adresse.focus();
                    }else{
                        if(document.form1.cp.value===""){
                            alert("Entrez votre code postal");
                            document.form1.cp.focus();
                        }else{
                            if(document.form1.ville.value===""){
                                alert("Entrez votre ville");
                                document.form1.ville.focus();
                            }else{
                                document.form1.submit();
                            }
                        }
                    }

                }

            }
        }
    }
</script>
{% else %}
    <div class="alert alert-info">Pas de jeu pour le moment</div>
{% endif %}