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

<body>

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

    <main>

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

        <!-- ---------------------------------- -->
        <!-- RÉCAP -->
        <!-- ---------------------------------- -->
        <article class="stage_formulaire_cont form_adhesion">

            <section>
                <h1 class="titre_personne"><span class="rouge">RÉCAPITULATIF</span></h1>
            </section>
    
            <section class="">
                <h1><img class='icone_titre' src="/public/images/icones/icone_compte.png" alt="icone information à cliquer">VOTRE COMPTE ADHÉRENT</h1>

                <div class="grid_2inputs marginbottom_40px">
                    <div>
                        <p>Identifiant : <span class='identifiant'><%= identifiant %></span></p>
                    </div>
                    <div>
                        <% if (association_suzuki) { %>
                            <p>Association Suzuki : <span class='identifiant'><%= association_suzuki %></span></p>
                        <% } %>
                    </div>
                </div>

                <!-- PROPOSITION D'HÉBERGEMENT -->
                <% if (locals["hebergement_ville"]) { %>
                    <div class="icone_hebergement marginbottom_40px">
                        <div><img class='icone' src="/public/images/icones/icone_house.png" alt="icone information à cliquer"></div>
                        <p>Hébergement proposé : <span class='identifiant'><%= hebergement_ville %></span><span class='identifiant'>pour <%= hebergement_nb %> personnes.</span></p>
                    </div>
                <% } %>

                <div class="icone_hebergement">
                    <div><img class='icone' src="/public/images/icones/spectator.webp" alt="icone information à cliquer"></div>
                    <p>Nombre de spectateurs : <span class='identifiant'><%= spectateur_nb_place %></span></p>
                </div>
            </section>

            <section id="eleve">
                <% for (let toto = 1; toto < 5; toto++) { %>
                    <% if (locals["eleve_"+toto+"_nom"]) { %>
                        <div class="recap_personne">
                            <h2><img class='icone_titre' src="/public/images/icones/icone_personne.png" alt="icone information à cliquer">CONCERTISTE <span class="rouge numero"><%= locals["eleve_"+toto+"_numero"] %></span></h2>
                            <div>
                                <p>Nom : <span class='identifiant'><%= locals["eleve_"+toto+"_nom"] %> <%= locals["eleve_"+toto+"_prenom"] %></span></p>
                                <p>Âge : <span class='identifiant'><%= locals["eleve_"+toto+"_age"] %></span></p>
                                <p>Intrument : <span class='identifiant'><%= locals["eleve_"+toto+"_instrument"] %> - <%= locals["eleve_"+toto+"_cahier"] %></span></p>
                                <% if (locals["eleve_"+toto+"_instrument"]=="Piano") { %><p class="rouge">Pour le piano l’inscription doit être validée par le comité.</p><% } %>
                                <p>Pièce : <span class='identifiant'><%= locals["eleve_"+toto+"_piece"] %></span></p>
                                <p>Professeur : <span class='identifiant'><%= locals["eleve_"+toto+"_prof_nom"] %> - <%= locals["eleve_"+toto+"_prof_mail"] %></span></p>
                                
                            </div>
                        </div>
                    <% } %>
                <% } %>
            </section>

            <section id="encadrant">
                <% for (let toto = 1; toto < 5; toto++) { %>
                    <% if (locals["encadrant_"+toto+"_nom"]) { %>
                        <div class="recap_personne">
                            <h2><img class='icone_titre' src="/public/images/icones/icone_personne.png" alt="icone information à cliquer">ENCADRANT <span class="rouge numero"><%= locals["encadrant_"+toto+"_numero"] %></span></h2>
                            <div>
                                <p>Encadrant : <span class='identifiant'><%= locals["encadrant_"+toto+"_type"] %></span></p>
                                <p>Nom : <span class='identifiant'><%= locals["encadrant_"+toto+"_nom"] %> <%= locals["encadrant_"+toto+"_prenom"] %></span></p>
                                <p>Téléphone : <span class='identifiant'><%= locals["encadrant_"+toto+"_telephone_mobile"] %></span></p>
                                <p>Mail : <span class='identifiant'><%= locals["encadrant_"+toto+"_mail"] %></span></p>
                                <% if (locals["encadrant_"+toto+"_prof_instrument"]) { %>
                                    <p>Instrument  : <span class='identifiant'><%= locals["encadrant_"+toto+"_prof_instrument"] %></span></p>
                                <% } %>
                                
                            </div>
                        </div>
                    <% } %>
                <% } %>
            </section>

            <hr>


            <section class="tarifs_ss_margel">
                <p class="rouge maxwidth_600">Si vous cliquez sur le bouton "VALIDER" l'inscription sera enregistrée, vous ne pourrez plus recommencer.</p>
            </section>

            <section class="buttons">

                <form action="post_valid_recap" method="post" class="">
                    <button type="submit" class="button_icone button_icone_recap bg_green">
                        <span class="">VALIDER</span>
                    </button>
                </form>
                
            </section>


        </article>

        <!-- ------------------------- -->
        <!-- Explication aux visiteurs -->
        <!-- ------------------------- -->

        <section class="grid savoirplus_accueil">

            <div id="savoirplus_button" class="savoirplus_button">
                <p>En savoir plus sur la procédure de paiement</p>
            </div>

            <div id="savoirplus_content" class="savoirplus_content hidden">
                <p>La page suivante vous permettra de valider vos billets.</p>
                <p>Vous recevrez vos billets de la part de la plateforme de billetterie "Weezevent".</p>
                <br>
                <p></p>
                <br>
                
            </div>


        </section>

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

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