{% if forms is defined and (forms|length) > 0 %}
  <section class="flexible-form" id="flexibleForm{{ forms['data']['tb_form_c_nom'] }}">
    <form id="mainFlexibleForm" method="POST" action="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}" enctype="multipart/form-data">
      <input type="hidden" value="" id="token" name="token" />
      <input type="hidden" value="{{ forms['data']['tb_form_c_nom'] }}" id="title_form" name="title_form" />
      <input type="hidden" value="{{ forms['data']['tb_form_id'] }}" id="form" name="form" />

      <div class="flexible-form__title-wrapper">
        <div class="container">
          <h2 class="flexible-form__title">{{ forms['data']['tb_form_c_nom_online']|raw }}</h2>
          <p class="flexible-form__description">{{ forms['data']['tb_form_c_description_debut']|raw }}</p>
        </div>
      </div>

      <div class="flexible-form__container">
        {% if formCount > 1 %}
          <div class="flexible-form__steps">
            <div class="step-group">
              {% for i in 1..formCount %}
                <span class="step"></span>
              {% endfor %}
              <span class="step completed"></span>
            </div>
          </div>
        {% endif %}

        <div id="flexibleFormWrapper" class="flexible-form__wrapper">
          <div class="alert-message alert-message--form d-none" id="formResult">
            <div class="alert-message__graphic">
              <svg id="checkMessageSvg" viewbox="0 0 415.869 415.869" width="50" heigt="50" style="enable-background:new 0 0 415.869 415.869;">
                <path id="check" d="M193.306,282.645L193.306,282.645c-4.702,0-8.882-2.09-11.494-5.224l-78.89-85.682c-5.747-6.269-5.224-16.196,1.045-21.943c6.269-5.747,16.196-5.224,21.943,1.045l67.918,73.665L381.91,56.947c6.269-6.269,16.196-6.269,21.943,0c5.747,6.269,6.269,16.196,0,21.943L204.278,277.943C201.665,281.078,197.486,282.645,193.306,282.645z" />
                <path id="circle" d="M207.935,415.869C93.518,415.869,0,322.351,0,207.935S93.518,0,207.935,0c8.882,0,15.673,6.792,15.673,15.673s-6.792,15.673-15.673,15.673c-97.176,0-176.588,79.412-176.588,176.588s79.412,176.588,176.588,176.588s176.588-79.412,176.588-176.588c0-8.882,6.792-15.673,15.673-15.673s15.673,6.792,15.673,15.673C415.869,322.351,322.351,415.869,207.935,415.869z" />
              </svg>
            </div>
            <div class="alert-message__content">
              <p class="h4">
                {% if forms['data']['tb_form_c_description_fin'] != '' %}
                  {{ forms['data']['tb_form_c_description_fin'] }}
                {% else %}
                  Votre message a bien été enregistré
                {% endif %}
              </p>
            </div>

            <div class="alert-message__cta">
              {% set showDownloadBtn = false %}

              {% for forms in forms['form'] %}
                {% for form in forms %}
                  {% if form['label_recap'] != '' %}
                    {% set showDownloadBtn = true %}
                  {% endif %}
                {% endfor %}
              {% endfor %}
              {% if showDownloadBtn %}
                {% if forms['data']['tb_form_encaissement_en_ligne'] is defined and forms['data']['tb_form_encaissement_en_ligne'] == 1 %}
                  <a id="toStripe" href="#" class="btn btn-primary" type="button" aria-hidden="true">
                    {% if forms['data']['tb_form_label_bouton_paiement'] is defined and forms['data']['tb_form_label_bouton_paiement'] is not empty %}
                      {{ forms['data']['tb_form_label_bouton_paiement'] }}
                    {% else %}
                      Payer
                    {% endif %}
                  </a>
                {% endif %}
                <a id="quotePDF" class="btn btn-outline-primary" type="button" aria-hidden="true">Télécharger le devis en PDF</a>

                <script>
                  sendPdf = 'true'
                </script>
              {% else %}
                <a href="{{ path('home') }}" class="btn btn-primary">Retour à la page d'accueil</a>
                <script>
                  sendPdf = 'false'
                </script>
              {% endif %}
            </div>
          </div>

          <div class="flexible-form__content">
            <div class="flexible-form__body">
              <div class="row">
                <div class="col">
                  {% include 'vitrine/formulaire/includes/_inputs.html.twig' %}
                </div>
                <div class="col" id="recapCard">
                  {% include 'vitrine/formulaire/includes/_recap.html.twig' %}
                </div>
              </div>
            </div>

            <div class="flexible-form__footer">
              <div class="button-group inpdiv">
                {% if formCount > 1 %}
                  <button class="btn btn-outline-primary border-0" type="button" id="prevBtn" onclick="nextPrev(this, -1, 'prev')" style="display:none">Précédent</button>
                  <button class="btn btn-primary" type="button" id="nextBtn" onclick="nextPrev(this, 1, '')">Suivant</button>
                {% else %}
                  <button class="btn btn-primary" type="button" id="saveBtn" onclick="nextPrev(this, 1, '')">Enregistrer</button>
                {% endif %}
              </div>
            </div>

            <div class="flexible-form__recaptcha-info">
              Ce site est protégé par reCAPTCHA, la
              <a class="link-primary" href="https://policies.google.com/privacy">politique privée</a>
              de Google et les
              <a class="link-primary" href="https://policies.google.com/terms">conditions d'utilisation</a>.
              <br />
              Les informations saisies permettront le traitement de votre demande et éventuellement de vous contacter si vous avez des difficultés à remplir entièrement votre formulaire.
            </div>
          </div>
        </div>
      </div>
    </form>
    <input type="hidden" id="urlTwigPath" value="{{ path('generate_plan_stripe', { token: '__token_placeholder__' }) }}" />
  </section>
{% endif %}