{{ with (.Site.GetPage "/edge/edge-form") }}
  <section class="edge-form" id="form">
    <div class="edge-form__overlay"></div>
    <div class="container">
      <h2 class="edge-form__title">{{ .Params.title }}</h2>
      <p class="edge-form__description">{{ .Params.description }}</p>

      <div class="edge-form__container">
        <div class="edge-form__form-overlay"></div>
        <script src="https://js-eu1.hsforms.net/forms/embed/developer/139603372.js" defer></script>

        <script>
          // shows a fallback content if HubSpot forms library is not loaded
          // what can happen if the user has trackers blocking policy turned on
          document.addEventListener('DOMContentLoaded', function () {
            if (typeof hbspt === 'undefined' || !hbspt.forms) {
              const fallbackButtonContainer = document.createElement('div');
              fallbackButtonContainer.className = 'd-flex flex-column align-content-center px-5 py-5';
              const fallbackText = document.createElement('p');
              fallbackText.className = 'text-white text-center mb-4';
              fallbackText.innerHTML = {{- .Params.form.fallback.text -}};
              fallbackButtonContainer.appendChild(fallbackText);

              // Create a fallback button only if the link is provided
              // warning: check if content via the link is not blocked as well
              {{ if .Params.form.fallback.link }}
              const fallbackButton = document.createElement('a');
              fallbackButton.href = {{- .Params.form.fallback.link -}};
              fallbackButton.target = '_blank';
              fallbackButton.className = 'button button_contained button_lg';
              fallbackButton.textContent = {{- .Params.form.fallback.buttonText -}};
              fallbackButtonContainer.appendChild(fallbackButton);
              {{ end }}

              document.getElementsByClassName("edge-form__container")[0].appendChild(fallbackButtonContainer);
            }
          });
        </script>

        <div
          class="hs-form-html"
          data-region="eu1"
          data-form-id="3adfb3a8-1c4b-4670-958f-325826039f7e"
          data-portal-id="139603372"
        ></div>
      </div>
    </div>
  </section>
{{ end }}