<%- include('../../template_parts/head')%>

<body>

    <!-- ---------------------------------- -->
    <!-- HEADER -->
    <!-- ---------------------------------- -->
    <%- include('../../template_parts/header_tunnel')%>

    <main>

        <!-- ---------------------------------- -->
        <!-- TITRE DE LA PAGE -->
        <!-- ---------------------------------- -->
        <%- include('../template_parts/concert_titrepage')%>

        <!-- ---------------------------------- -->
        <!-- FORMULAIRE -->
        <!-- ---------------------------------- -->
        <article class="stage_formulaire_cont form_adhesion">
    
            <form id="form_achat_spectateur" action="" method="post" class="stage_formulaire">

                <!-- ---------------------------------- -->
                <!-- ADHÉRENT -->
                <!-- ---------------------------------- -->
                <section>
                    <h1><img class='icone_titre' src="/public/images/icones/icone_compte.png" alt="icone information">VOTRE COMPTE ADHÉRENT</h1>

                    <div class="grid_2inputs">
                        <div>
                            <p>Identifiant : <span class='identifiant'><%= identifiant %></span></p>
                        </div>
                    </div>

                </section>



                

                <!-- ---------------------------------- -->
                <!-- EXPLICATIONS -->
                <!-- ---------------------------------- -->
                <section>
                    <h1 class="titre_personne"><span class="rouge">ACHAT DES PLACES SPECTATEURS RESTANTES</span></h1>                   
                </section>

                <div class="space40"></div>

                <!-- ---------------------------------- -->
                <!-- SPECTATEUR -->
                <!-- ---------------------------------- -->
                <section>
                    <div class="place_categorie">
                        <div class="sous_titre">
                            <div><img class='icone_titre' src="/public/images/icones/spectator.webp" alt="icone information à cliquer" /></div>
                            <div><p>SPECTATEURS</p></div>
                        </div>
                    </div>
                </section>
                <div><p class="marginbottom_40px montserrat_light">Tarif spectateur : 20€</p></div>

                <!-- COMBIEN DE SPECTATEURS ? 3 MAX -->
                <% if(locals.quota_spectateur == "nondepasse"){ %>
                    <section id="spectateur0" data-spectateur_nb_restantes='<%= spectateur_nb_restantes %>' data-spectateur_remisenvente='oui' data-quota_total_spectateur='<%= quota_total_spectateur %>'>
                    
                    </section>
                    <% } else{ %>
                        <section id="spectateur0" data-spectateur_nb_restantes='<%= spectateur_nb_restantes %>' data-spectateur_remisenvente='non' data-quota_total_spectateur='<%= quota_total_spectateur %>'>
                            <p class="montserrat_light"><mark>Vous avez déjà atteint le nombre maximum de spectateurs inscrits</mark></p>
                        </section>
                    <% } %>
                

                <div class="space40"></div>

                <section>
                    <h1 class="titre_personne"><span class="rouge">ENCADRANTS BÉNÉVOLES</span></h1>                   
                </section>

                <div class="space40"></div>
                <!-- ---------------------------------- -->
                <!-- ENCADRANT -->
                <!-- ---------------------------------- -->
                <section>
                    <div class="place_categorie">
                        <div class="sous_titre">
                            <div><img class='icone_titre' src="/public/images/icones/encadrant.webp" alt="icone information à cliquer" /></div>
                            <div>
                                <p>ENCADRANT <span class="montserrat_light">PARENT</span> ou <span class="montserrat_light">PROFESSEUR</span></p>
                                <ul class="note">
                                    <li>Les encadrants n'ont pas besoin d'acheter de place spectateur.</li>
                                    <li>Selon ses missions l'encadrant ne verra peut-être pas le concert.</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Voulez-vous ajouter un encadrant ? -->
                    <div class="input_checkbox">
                        <input type="checkbox" name="check_encadrant0" id="check_encadrant0" onchange="ajout_encadrant(0,<%= encadr_parent_nb_restantes %>)">
                        <label class="gras" for="check_encadrant0">Souhaitez-vous être encadrant pour cet événement ?</label>
                    </div>

                </section>

                <!-- SAISIE POUR UN ENCADRANT -->
                <section id="encadrant0" data-encadr_parent_nb_restantes='<%= encadr_parent_nb_restantes %>'>
                </section>


                <button type="submit" class="button_icone">
                    <span class="btn_icone">+</span><span class="btn_texte">VALIDER</span>
                </button>

            </form>
        </article>

    </main>
  
  
  
    <!-- ---------------------------------- -->
    <!-- FOOTER -->
    <!-- ---------------------------------- -->
    <%- include('../../template_parts/footer')%>
  
</body>

<!-- JAVASCRIPT d'EXECUTION -->
<script src="/public/js/adhesion/hidden_visible.js"></script>
<script src="/public/js/concert/concert_formulaire_famille.js"></script>

</html>