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

<body>

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



  <main>

    <article>

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

      <!-- AFFICHAGE DES MESSAGES ERREURS RETOUR DE POST FORMULAIRE -->
      <% if (locals.err_mail_form_adhesion_1) { %>
        <div class="erreur">
          <p><%= err_mail_form_adhesion_1 %></p>
          <p><%= err_mail_form_adhesion_2 %></p>
          <p><%= err_mail_form_adhesion_3 %></p>
          <p><%= err_mail_form_adhesion_4 %></p>
        </div>
      <% }; %>
      
      <!-- ---------------------------------- -->
      <!-- FORMULAIRE de don -->
      <!-- ---------------------------------- -->

      <form action="" method="post" class="form_don">

        <h2>Quelques informations à remplir pour valider votre don :</h2>
        
        <section class="formulaire">

            <div class="input_box input_text input_box_gris">
              <label for="montant">Montant*</label>
              <span class="currency">€</span>
              <input type="number" name="montant" id="montant" placeholder="de votre don" value="<% if (locals.montant) { %><%= montant %><% }; %>" required>
            </div>
            
            <div class="input_box input_text input_box_gris">
              <label for="nom">Nom*</label>
              <input type="text" name="nom" id="nom" value="<% if (locals.nom) { %><%= nom %><% }; %>" required>
            </div>
            <div class="input_box input_text input_box_gris">
              <label for="prenom">Prénom*</label>
              <input type="text" name="prenom" id="prenom" required>
            </div>

            <p class="form_sous_titre">Votre adresse :</p>

            <div class="input_box input_text input_box_gris">
              <label for="adresse_rue">Rue*</label>
              <input type="text" name="adresse_rue" id="adresse_rue" required>
            </div>

            <div class="input_box input_text input_box_gris">
              <label for="adresse_complement">Complément d'adresse</label>
              <input type="text" name="adresse_complement" id="adresse_complement">
            </div>
            <div class="input_box input_text input_box_gris">
              <label for="adresse_codepostal">Code postal*</label>
              <input type="text" name="adresse_codepostal" id="adresse_codepostal" required>
            </div>
            <div class="input_box input_text input_box_gris">
              <label for="adresse_ville">Ville*</label>
              <input type="text" name="adresse_ville" id="adresse_ville" required>
            </div>
            <div class="input_box input_text input_box_gris">
              <label for="adresse_pays">Pays*</label>
              <input type="text" name="adresse_pays" id="adresse_pays" required>
            </div>

            <p class="form_sous_titre">Votre contact pour vous envoyer le reçu :</p>

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

            <div class="input_box input_text input_box_gris">
              <label for="telephone_mobile">Téléphone mobile</label>
              <input type="tel" name="telephone_mobile" id="telephone_mobile">
            </div>

            <section class="commentaire">
              <div class="input_box input_text input_box_gris">
                  <label class="labeltextarea" for="commentaire">Un commentaire ou une information particulière <br> à nous transmettre ?</label>
                  <textarea class="textarea_commentaire" id="commentaire" name="commentaire"rows="4" cols="40"></textarea>
              </div>
          </section>

          <div class="space30"></div>

          <h2>En cliquant sur VALIDER, vous allez être redirigé vers notre système de paiement par carte bancaire sécurisé.</h2>

          <div class="space30"></div>

        </section>
        
        


        <!-- ---------------------------------- -->
        <!-- CLIQUEZ SUR BOUTON ADHÉRER -->
        <!-- ---------------------------------- -->

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

      </form>

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

      <section class="savoirplus_accueil">

        <div id="savoirplus_button" class="savoirplus_button">
          <p>En savoir plus sur ce formulaire</p>
        </div>

      
        <div id="savoirplus_content" class="savoirplus_content hidden">
          <p>Cette page va vous permettre de faire un don à l'Association Française pour la Pédagogie Suzuki.</p>
          <br>
          <p>Nous utilisons le système de paiement sécurisé par carte bancaire STRIPE.</p>
          <br>
          <br>
          <p><span class="gras">UTILISATION DES DONNÉES PERSONNELLES</span></span></p>
          <p>Les informations recueillies dans le formulaire seront conservées par l'Association.</p>
          <p>L'association ne transmettra jamais les informations à une autre personne ou organisme.</p>
          <p>Contacter l'Association pour toutes questions sur vos données : mise à jour, suppression.</p>
          <br>
          <p><span class="gras">COOKIE</span></span></p>
          <p>Ce site utilise 1 cookie qui servira pour garder votre session ouverte sur votre navigateur le temps de remplir le formulaire et de passer par la page paiement et la page finale.</p>
          <p>Ce cookie servira uniquement à des fins de navigation durant la même session, et ne sera en aucune manière transmis à un organisme tiers. Le cookie de session est automatiquement détruit par le navigateur lors de la fermeture de la page.</p>
          <p>Si vous n'acceptez pas ce cookie vous ne pourrez pas faire de don via ce formulaire car le processus ne fonctionnera pas. Vous pouvez dans ce cas simplement fermer la page et il partira.</p>
        </div>


      </section>



    </article>

  </main>



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

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

</html>