{{#fields}}
<style>
  @keyframes bounce {
    to {
      opacity: 0.3;
      transform: translateY(-10px);
    }
  }
</style>
<div class="fade in" id="formComponent">
    <div class="modal-dialog modal-lg">
      <div class="GDForm-2020">
        <div>
          <div id="form" class="preform">

            <form
              v-on:submit.prevent="submitHandler"
              class="NewForm ng-pristine ng-valid"
              name="{{formid}}"
              id="form"
            >
              <div class="modal-content GDForm-2020__Modal">
                <div id="loading-wrapper">
                  <div id="loading">
                    <div id="loading-image" style="display: flex; justify-content: center; align-items: center; height: 100px;">
                      <div class="circle" style="width: 10px; height: 10px; margin: 3px; background-color: #000; border-radius: 50%; animation: bounce 0.6s infinite alternate;"></div>
                      <div class="circle" style="width: 10px; height: 10px; margin: 3px; background-color: #000; border-radius: 50%; animation: bounce 0.6s infinite alternate 0.2s;"></div>
                      <div class="circle" style="width: 10px; height: 10px; margin: 3px; background-color: #000; border-radius: 50%; animation: bounce 0.6s infinite alternate 0.4s;"></div>
                    </div>
                  </div>
                </div>
                <div class="modal-header GDForm-2020__Modal__Header">
                  <h2
                    class="brandcolor GDForm-2020__Title"
                    style="margin-top: 0px"
                  >
                    {{header}}
                  </h2>
                  <p class="GDForm-2020__Subtitle">{{subheader}}</p>

                </div>

                          <div id="thankYouModal" class="modal">
                            <div class="thankYouModalContent fade in">
                              <div class="modal-dialog modal-lg">
                                <div style="text-align: center">
                                  <p id="thankYouModalImage"></p>
                                  <h1></h1>
                                  <p></p>
                                </div>
                              </div>
                            </div>
                          </div>

                            <div class="modal-body white">

                                    <div id="elements" style="padding: 0 15px;">
                                        <!-- All elements will be rendered here -->
                                    </div>


                              <div class="modal-footer GDForm-2020__Footer" style="margin-bottom: 30px;">
                              <button
                                id="submitButton"
                                type="submit"
                                class="btn btn-success GDForm-2020__Footer__Submit"
                                disabled
                              >
                                {{submitbtn}}
                              </button>
                              <div
                                id="privacy_statement"
                                class=""
                                v-html="privacyStatement"
                              >
                              </div>
              </div>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>


{{#scsData.detailPageLink}}
<li><a href="{{scsData.detailPageLink}}" title="Go to detail page"><span class="detail- page">Details</span></a></li>
{{/scsData.detailPageLink}}
</ul>
{{/fields}}