{%- if template == 'product.only_config' and request.design_mode == false -%}
  <hdt-lazy-modal id="hdt-quick-add-modal" color-scheme="{{ settings.color_scheme_dialog }}" section-id="{{ section.id }}" role="region" aria-live="polite" class="hdt-quick-add-modal hdt-modal" aria-modal="true" effect="slide" hidden></hdt-lazy-modal>
{%- else -%}
  {%- if template == 'product.only_config' %}<hdt-lazy-modal un-detect id="hdt-quick-add-modal" color-scheme="{{ settings.color_scheme_dialog }}" section-id="{{ section.id }}" role="region" aria-live="polite" class="hdt-quick-add-modal hdt-modal" aria-modal="true" effect="slide" hidden>{% endif -%}
  <h3 slot="header"></h3>
  <div class="hdt-main-product-quick-add hdt-s-gradient" color-scheme="{{ section.settings.color_scheme }}">
      {% content_for 'blocks' %}
  </div>

  {% comment %} {%- if has_form_atc != true and product != empty -%}
    {%- form 'product', product, id: product_form_id, hidden: '' -%}<input type="hidden" name="id" value="{{ selected_variant.id }}" disabled>{%- endform -%}
  {%- endif -%} {% endcomment %}

  {%- if template == 'product.only_config' -%}
  </hdt-lazy-modal>
  <script>
    document.addEventListener('DOMContentLoaded', (event) => {
      if (!Shopify.designMode) return;
      document.addEventListener("shopify:section:select", (event) => {
        const modal = event.target.querySelector('#hdt-quick-add-modal');
        if (modal) modal.hidden = false
      });
      document.addEventListener("shopify:section:deselect", (event) => {
        const modal = event.target.querySelector('#hdt-quick-add-modal');
        if (modal) modal.hidden = true
      });
    });
  </script>
  {%- endif -%}
{%- endif -%}


{% schema %}
{
  "name": "t:sections.main-quick-add.name",
  "tag": "section",
  "class": "hdt-main-section hdt-main-section--quick-add hdt-quick-add-modal",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
  ],
  "blocks": [
    {
      "type": "_variant-info"
    },
    {
      "type": "_product-variant-picker"
    },
    {
      "type": "_quantity-selector"
    },
    {
      "type": "_product-buy-button"
    },
    {
      "type": "_product-item-property"
    },
    {
      "type": "_incoming-mess"
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "_variant-info"
      },
      {
        "type": "_product-variant-picker"
      },
      {
        "type": "_quantity-selector"
      },
      {
        "type": "_product-buy-button"
      }
    ]
  }
}
{% endschema %}