{% load wagtailimages_tags %}
<section class="saas-demo saas-demo--modal-trigger saas-demo--{{ self.background_style }}"
         data-width="{{ self.layout_width }}"
         data-demo-modal-root>
    <div class="saas-demo__container">
        <div class="saas-demo__content">
            <h2 class="saas-demo__title">{{ self.section_title }}</h2>
            {% if self.section_subtitle %}
            <div class="saas-demo__subtitle">{{ self.section_subtitle }}</div>
            {% endif %}

            <button type="button" class="saas-demo__trigger" data-demo-modal-open>
                {{ self.submit_button_text }}
            </button>
        </div>
    </div>

    <!-- Modal -->
    <div class="saas-demo__modal" data-demo-modal hidden>
        <div class="saas-demo__modal-backdrop" data-demo-modal-close></div>
        <div class="saas-demo__modal-content">
            <button type="button" class="saas-demo__modal-close" data-demo-modal-close aria-label="Close">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            </button>

            <h3 class="saas-demo__modal-title">{{ self.section_title }}</h3>

            <form class="saas-demo__form" action="{% url "contact_form:contact-form-handler" %}" method="post">
                {% csrf_token %}
                <div class="saas-demo__fields">
                    {% for field in self.form_fields %}
                    <div class="saas-demo__field">
                        <label class="saas-demo__label" for="modal-{{ field.field_type }}">
                            {{ field.label }}
                            {% if field.required %}<span class="saas-demo__required">*</span>{% endif %}
                        </label>
                        {% if field.field_type == 'message' %}
                        <textarea class="saas-demo__textarea" 
                                  id="modal-{{ field.field_type }}" 
                                  name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
                                  placeholder="{{ field.placeholder }}"
                                  {% if field.required %}required{% endif %}></textarea>
                        {% else %}
                        <input class="saas-demo__input" 
                               type="{% if field.field_type == 'email' %}email{% elif field.field_type == 'phone' %}tel{% else %}text{% endif %}" 
                               id="modal-{{ field.field_type }}" 
                               name="{% if field.field_type == "email" %}email_from{% elif field.field_type == "phone" %}phonenumber{% elif field.field_type == "text" %}name{% else %}{{ field.field_type }}{% endif %}"
                               placeholder="{{ field.placeholder }}"
                               {% if field.required %}required{% endif %}>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>

                <button type="submit" class="saas-demo__submit">{{ self.submit_button_text }}</button>

                {% if self.privacy_text %}
                <div class="saas-demo__privacy">{{ self.privacy_text }}</div>
                {% endif %}
            </form>
        </div>
    </div>
</section>
<script>
  (function () {
    const roots = document.querySelectorAll('[data-demo-modal-root]');
    roots.forEach((root) => {
      if (root.dataset.modalBound === "1") return;
      root.dataset.modalBound = "1";

      const modal = root.querySelector('[data-demo-modal]');
      const openBtn = root.querySelector('[data-demo-modal-open]');
      const closeBtns = root.querySelectorAll('[data-demo-modal-close]');
      if (!modal || !openBtn) return;

      const openModal = () => {
        modal.hidden = false;
        document.body.style.overflow = 'hidden';
      };

      const closeModal = () => {
        modal.hidden = true;
        document.body.style.overflow = '';
      };

      openBtn.addEventListener('click', openModal);
      closeBtns.forEach((btn) => btn.addEventListener('click', closeModal));

      root.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && !modal.hidden) closeModal();
      });
    });
  })();
</script>