{{ $portal_id := index .Params "portalId" }}
{{ $form_id := index .Params "formId" }}
{{ $version := default "v2" (index .Params "version") }}
{{ $allowed_versions := slice "v2" "v4" }}

{{ if not (in $allowed_versions $version) }}
  {{ errorf "hubspot_contact_form: invalid version %q. Allowed values: %s" $version (delimit $allowed_versions ", ") }}
{{ end }}

{{ if and $portal_id $form_id }}
{{ if eq $version "v2" }}
<div id="hubspot-form-container-{{ $form_id }}"></div>
<script
  charset="utf-8"
  type="text/javascript"
  src="//js.hsforms.net/forms/v2.js"
></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: '{{ $portal_id }}',
    formId: '{{ $form_id }}',
    target: '#hubspot-form-container-{{ $form_id }}',
  });
</script>
{{ else if eq $version "v4" }}
<div
  id="hubspot-form-container-{{ $form_id }}"
  class="hs-form-frame"
  data-region="na1"
  data-form-id="{{ $form_id }}"
  data-portal-id="{{ $portal_id }}"
></div>
<script src="//js.hsforms.net/forms/embed/{{ $portal_id }}.js" defer></script>
{{ end }}

<div id="hubspot-form-fallback-{{ $form_id }}" class="alert alert-info hubspot-form-fallback hidden">
  {{ if isset .Params "fallbackMessage" }}
    {{ .Params.fallbackMessage | markdownify }}
  {{ else }}
    <p>
      If you are unable to access the contact form, please reach out to us at
      <a href="mailto:membership.coordination@eclipse-foundation.org"
        >membership.coordination@eclipse-foundation.org</a
      >
      for assistance with your membership inquiry.
    </p>
  {{ end }}
</div>

<script>
  (function () {
    const container = document.getElementById("hubspot-form-container-{{ $form_id }}");
    const fallback = document.getElementById("hubspot-form-fallback-{{ $form_id }}");
    if (!container || !fallback) return;
    const observer = new MutationObserver(function () {
      if (container.children.length > 0) observer.disconnect();
    });
    observer.observe(container, { childList: true });
    setTimeout(function () {
      observer.disconnect();
      if (container.children.length === 0) {
        fallback.classList.remove("hidden");
      }
    }, 5000);
  })();
</script>
{{ end }}