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

<body>

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

    <main>

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


        <% if (locals.err_mineur) { %>
            <div class="erreur">ERREUR : <p class='identifiant'><%= err_mineur %></p></div>
        <% } %>
        <% if (locals.err_campado_capa) { %>
            <div class="erreur">ERREUR : <p class='identifiant'><%= err_campado_capa %></p></div>
        <% } %>

        <article class="stage_formulaire_cont form_adhesion">
    
            <form id="stage_annuel_form" action="" method="post" class="stage_formulaire">

                <section>

                    <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">
                        <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 %>' required>
                        </div>
                    </div>

                    <h1 class="titre_personne"><span class="rouge">Informations sur l'adhérent à l'association Suzuki, française, ou d'un autre pays :</span></h1>

                    <div class="grid_2inputs">
                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_nom">Nom de famille *</label>
                            <input type="text" name="adherent_nom" id="adherent_nom" value='<% if (locals.adherent_nom) { %><%= adherent_nom %><% }; %>' required>
                        </div>

                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_prenom">Prénom *</label>
                            <input type="text" name="adherent_prenom" id="adherent_prenom" value='<% if (locals.adherent_prenom) { %><%= adherent_prenom %><% }; %>' required>
                        </div>
                    </div>

                    <div class="grid_2inputs">
                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_adresse_rue">Rue *</label>
                            <input type="text" name="adherent_adresse_rue" id="adherent_adresse_rue" value="<% if (locals.adherent_adresse_rue) { %><%= adherent_adresse_rue %><% }; %>" required>
                        </div>
                
                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_adresse_complement">Complément d'adresse</label>
                            <input type="text" name="adherent_adresse_complement" id="adherent_adresse_complement" value="<% if (locals.adherent_adresse_complement) { %><%= adherent_adresse_complement %><% }; %>">
                        </div>
                
                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_adresse_codepostal">Code postal</label>
                            <input type="text" name="adherent_adresse_codepostal" id="adherent_adresse_codepostal" value="<% if (locals.adherent_adresse_codepostal) { %><%= adherent_adresse_codepostal %><% }; %>">
                        </div>
                
                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_adresse_ville">Ville *</label>
                            <input type="text" name="adherent_adresse_ville" id="adherent_adresse_ville" value="<% if (locals.adherent_adresse_ville) { %><%= adherent_adresse_ville %><% }; %>" required>
                        </div>
                
                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_adresse_pays">Pays *</label>
                            <input type="text" name="adherent_adresse_pays" id="adherent_adresse_pays" value="<% if (locals.adherent_adresse_pays) { %><%= adherent_adresse_pays %><% }; %>" required>
                        </div>
                    </div>
                    <div class="grid_2inputs">
                        <div class="input_box input_text input_box_gris">
                            <label for="adherent_telephone">Téléphone mobile *</label>
                            <input type="tel" name="adherent_telephone" id="adherent_telephone" value="<% if (locals.adherent_telephone) { %><%= adherent_telephone %><% }; %>" 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 %><% }; %>" required>
                        </div>
                    </div>
                </section>

                
                <section>

                    <h1 class="titre_personne"><span class="rouge">INSCRIPTION DES PERSONNES PRÉSENTES AU STAGE (adultes et/ou enfants)</span></h1>
                    <div class="description">
                        <p>- Tous les élèves instrumentistes</p>
                        <p>- Toutes les personnes qui ont une activité au sein du stage</p>
                        <p>- Toutes les personnes qui logent au centre Les Flocons Verts.</p>
                    </div>
                    
                    <div class="space30 "></div>
                    <div class="grid_2inputs">
                        <div class="icone_hebergement">
                            <div><img class='icone' src="/public/images/icones/icone_house.png" alt="icone information à cliquer"></div>

                            <div class="input_box input_text input_box_bleu">
                                <label for="hebergement">Choix hébergement * <span onclick="document.querySelector('#savoirplus_heberg_content').classList.toggle('ouvrir')"><img class='savoirplus_icone' src="/public/images/icones/icone_infos.png" alt="icone information à cliquer"></span></label>
                                <select id="hebergement" name="hebergement" required>
                                    <option value="" selected></option>
                                    <option value="flocons verts partagé">Centre les flocons verts hébergement partagé</option>
                                    <option value="flocons verts non partagé">Centre les flocons verts hébergement non partagé</option>
                                    <option value="independant">indépendant</option>
                                </select>
                            </div>
                        </div>
                    </div>




                </section>
                
                <section class="savoirplus_stage">
                    <div id="savoirplus_heberg_content" class="savoirplus_content displaynone">
                        <span onclick="document.querySelector('#savoirplus_heberg_content').classList.toggle('ouvrir')"><img class='close_icone' src="/public/images/icones/icone_close.png" alt="icone information à cliquer"></span>
                        <p>INFORMATIONS SUR L'HEBERGEMENT</p>
                        <br>
                        <p>Les Flocons Verts - 123 route des servages - 74300 Carroz d’Arâches.</p>
                        <br>
                        <p>L'hébergement, est prévu en pension complète : 6 nuits avec repas (dimanche soir 18 août, au petit déjeuner du 28 août), hors goûter.</p>
                        <br>
                        <p>Le centre "Les Flocons Verts” offre d’agréables chambres et duplex de 3 à 8 personnes, équipés de sanitaires.</p>
                        <br>
                        <br>
                        <p>Draps, couettes, oreillers et linge de toilette sont fournis par les Flocons verts.</p>
                        <br>
                    </div>
                </section>

                <section id="personne0">
                </section>

                <section class="commentaire">
                    <div class="input_box input_text input_box_bleu">
                        <label class="labeltextarea" for="commentaire_adherent">Un commentaire ou une information particulière <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/stagenat/stagenational_formulaire_personne.js"></script>
  
  </html>