<%- 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_inscription_famille" action="" method="post" class="stage_formulaire">

                <!-- ---------------------------------- -->
                <!-- EXPLICATIONS -->
                <!-- ---------------------------------- -->
                <section>
                    <h1 class="titre_personne"><span class="rouge">LISTE D'ATTENTE ÉLÈVE INSTRUMENTISTE</span></h1>                
                </section>

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

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

                    <div class="grid_2inputs">
                        <div>
                            <p>Identifiant : <span class='identifiant'><%= identifiant %></span></p>
                        </div>
                    </div>
                    <div class="grid_2inputs">
                        <div class="input_box input_text input_box_gris">
                            <label for="association_suzuki">Association Suzuki *</label>
                            <input type="text" name="association_suzuki" id="association_suzuki" value='<%= association_suzuki %>' title="Association noté dans votre dossier adhérent, vous pouvez la modifier" required>
                        </div>
                    </div>

                    <div class="grid_2inputs">
                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_nom">Nom du parent *</label>
                            <input type="text" name="adherent_nom" id="adherent_nom" value='<% if (locals.adherent_nom) { %><%= adherent_nom %><% }; %>' title="Nom de famille de l'adérent, famille ou professeur" required>
                        </div>

                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_prenom">Prénom du parent *</label>
                            <input type="text" name="adherent_prenom" id="adherent_prenom" value='<% if (locals.adherent_prenom) { %><%= adherent_prenom %><% }; %>' title="Prénom de l'adérent, famille ou professeur" required>
                        </div>
                    </div>


                    <div class="grid_2inputs">
                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_telephone_mobile">Téléphone mobile *</label>
                            <input type="tel" name="adherent_telephone_mobile" id="adherent_telephone_mobile" value="<% if (locals.adherent_telephone_mobile) { %><%= adherent_telephone_mobile %><% }; %>" title="Dans quelle ville habitez vous ?" required>
                        </div>

                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_mail">Mail *</label>
                            <input type="email" name="adherent_mail" id="adherent_mail" value="<% if (locals.adherent_mail) { %><%= adherent_mail %><% }; %>" title="Combien de personnes pouvez-vous héberger ?" required>
                        </div>
                    </div>

                </section>

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

                <!-- ---------------------------------- -->
                <!-- ÉlÈVES CONCERTISTES -->
                <!-- ---------------------------------- -->
                

                <section>
                    <div class="place_categorie">
                        <div class="sous_titre">
                            <div><img class='icone_titre' src="/public/images/icones/musican.webp" alt="icone information à cliquer" /></div>
                            <div><p>L'ÉLÈVE CONCERTISTE</p></div>
                        </div>
                    </div>
                    <div><p class="marginbottom_40px montserrat_light">Tarif élève concertiste : 23€</p></div>

                    <section class="marginbottom_40px">
                        <div class="montserrat_light">
                            <p><span class="montserrat_regular">Instruments en liste d'attente :</span></p>
                            <% if(locals.piano_nb_restantes < 1 ){ %> <p>- <span class="rouge">piano</span></p>%> <% }%>
                            <% if(locals.alto_nb_restantes < 1 ){ %> <p>- <span class="rouge">alto</span></p>%> <% }%>
                            <% if(locals.flute_nb_restantes < 1 ){ %> <p>- <span class="rouge">flûte</span></p>%> <% }%>
                            <% if(locals.trompette_nb_restantes < 1 ){ %> <p>- <span class="rouge">trompette</span></p>%> <% }%>
                            <% if(locals.harpe_nb_restantes < 1 ){ %> <p>- <span class="rouge">harpe</span></p>%> <% }%>
                            <% if(locals.violon1_nb_restantes < 1 ){ %> <p>- <span class="rouge">violon cahier 1 à 5</span></p>%> <% }%>
                            <% if(locals.violon2_nb_restantes < 1 ){ %> <p>- <span class="rouge">violon cahier 6 à 10</span></p>%> <% }%>
                            <% if(locals.violoncelle1_nb_restantes < 1 ){ %> <p>- <span class="rouge">violoncelle cahier 1 à 4</span></p>%> <% }%>
                            <% if(locals.violoncelle2_nb_restantes < 1 ){ %> <p>- <span class="rouge">violoncelle cahier 5 à 10</span></p>%> <% }%>
                        </div>
                    </section>


                    <section class="personne">

                        <section class="">
                            <div class="input_checkbox input_checkbox_bleu">
                                <input type="checkbox" name="eleve_engagement" id="eleve_engagement" required="">
                                <label for="eleve_engagement">Le concertiste s'engage à être présent les 2 journées du 20 et 21 avril 2024.</label>
                            </div>
                        </section>
                
                        <div class="grid_2inputs">
                            <div class="input_box input_text input_box_gris">
                            <label for="eleve_nom">Nom de famille *</label>
                            <input type="text" name="eleve_nom" id="eleve_nom" title="Nom de famille de l'élève concertiste" required="">
                            </div>
                
                            <div class="input_box input_text input_box_gris">
                            <label for="eleve_prenom">Prénom *</label>
                            <input type="text" name="eleve_prenom" id="eleve_prenom" title="Prénom de l'élève concertiste" required="">
                            </div>
                        </div>
                
                        <div class="grid_2inputs">
                            <div class="input_box input_text input_box_gris">
                                <label for="eleve_age">Age *</label>
                                <input type="number" name="eleve_age" id="eleve_age" placeholder="22 ans maximum" title="Entrer un chiffre" max="22" required="">
                            </div>
                        </div>
                
                        <div class="grid_2inputs">
                            <div class="input_box input_text input_box_bleu">
                                <label for="eleve_instrument">Instrument *</label>
                                <select id="eleve_instrument" name="eleve_instrument" title="De quel instrument joue l'élève ?" required="">
                                    <option value="" selected=""></option>
                                    <option value="Piano">Piano</option>
                                    <option value="Violon">Violon</option>
                                    <option value="Violoncelle">Violoncelle</option>
                                    <option value="Alto">Alto</option>
                                    <option value="Flute">Flûte</option>
                                    <option value="Trompette">Trompette</option>
                                    <option value="Harpe">Harpe</option>
                                </select>
                            </div>
                            <div class="input_box input_text input_box_bleu">
                                <label for="eleve_cahier">Niveau Cahier *</label>
                                <select id="eleve_cahier" name="eleve_cahier" title="Quel est son niveau" required="">
                                    <option value="" selected=""></option>
                                    <option value="Cahier 1">Cahier 1</option>
                                    <option value="Cahier 2">Cahier 2</option>
                                    <option value="Cahier 3">Cahier 3</option>
                                    <option value="Cahier 4">Cahier 4</option>
                                    <option value="Cahier 5">Cahier 5</option>
                                    <option value="Cahier 6">Cahier 6</option>
                                    <option value="Cahier 7">Cahier 7</option>
                                    <option value="Cahier 8">Cahier 8</option>
                                    <option value="Cahier 9">Cahier 9</option>
                                    <option value="Cahier 10">Cahier 10</option>
                                </select>
                            </div>
                        </div>
                
                        <div class="grid_2inputs">
                            <div class="input_box input_text input_box_bleu">
                                <label for="eleve_piece">Dernière pièce jouée *</label>
                                <input type="text" name="eleve_piece" id="eleve_piece" title="Quelle musique a-t-il joué en dernier ?" required="">
                            </div>
                        </div>
                
                        <div class="grid_2inputs">
                            <div class="input_box input_text input_box_bleu">
                                <label for="eleve_prof_nom">Nom et prénom du professeur *</label>
                                <input type="text" name="eleve_prof_nom" id="eleve_prof_nom" title="Le nom et prénom du professeur de l'élève" required="">
                            </div>
                
                            <div class="input_box input_text input_box_bleu">
                                <label for="eleve_prof_mail">Mail professeur *</label>
                                <input type="email" name="eleve_prof_mail" id="eleve_prof_mail" title="L'adresse mail du professeur" required="">
                            </div>
                        </div>
                        


                </section>
            
                
                
                <!-- SAISIE POUR UN CONCERTISTE -->
                <section id="eleve0" data-piano_nb_restantes='<%= piano_nb_restantes %>' data-alto_nb_restantes='<%= alto_nb_restantes %>' data-flute_nb_restantes='<%= flute_nb_restantes %>' data-trompette_nb_restantes='<%= trompette_nb_restantes %>' data-harpe_nb_restantes='<%= harpe_nb_restantes %>' data-violon1_nb_restantes='<%= violon1_nb_restantes %>' data-violon2_nb_restantes='<%= violon2_nb_restantes %>' data-violoncelle1_nb_restantes='<%= violoncelle1_nb_restantes %>' data-violoncelle2_nb_restantes='<%= violoncelle2_nb_restantes %>'>
                </section>

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


                <!-- ---------------------------------- -->
                <!-- COMMENTAIRE -->
                <!-- ---------------------------------- -->
                <% if(locals.deja_inscrit_concert == "non"){ %>
                    <section class="commentaire">
                        <div class="place_categorie">
                            <div class="sous_titre">
                                <div><i class="fa fa-comments"></i></div>
                                <div><p>COMMENTAIRE</p></div>
                            </div>
                        </div>
                        <div class="input_box input_text input_box_bleu margintop_40px">
                            <label class="labeltextarea" for="commentaire_adherent">Un commentaire <br> à nous transmettre ?</label>
                            <textarea class="textarea_commentaire" id="commentaire_adherent" name="commentaire_adherent"rows="8" cols="40"></textarea>
                        </div>
                    </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>