{%- assign has_any_table = false -%}
{%- for block in section.blocks -%}
  {%- if block.settings.row_content contains '<table' -%}
    {%- assign has_any_table = true -%}
    {%- break -%}
  {%- endif -%}
{%- endfor -%}

{% if has_any_table %}
  {{ 'component-accordion.css' | asset_url | stylesheet_tag }}
  {{ 'collapsible-content.css' | asset_url | stylesheet_tag }}

  {%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    #shopify-section-{{ section.id }} .customspecs .video-responsive {
      display:none;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }
  {%- endstyle -%}

  <div class="color-{{ section.settings.color_scheme }} gradient">
    <div class="collapsible-content collapsible-{{ section.settings.layout }}-layout isolate{% if section.settings.page_width == 'normal' %} page-width{% elsif section.settings.page_width == 'narrow'%} page-width--narrow{% endif %}">
      <div class="collapsible-content__wrapper section-{{ section.id }}-padding{% if section.settings.layout == 'section' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}">
        <div class="accordion{% if section.settings.layout == 'row' %} content-container color-{{ section.settings.container_color_scheme }} gradient{% endif %}" {{ block.shopify_attributes }}>
          <details id="Details-{{ section.id }}">
            <summary id="Summary-{{ section.id }}">
              <h3 class="accordion__title {{ section.settings.heading_size }}">
                {{ section.settings.heading }}
              </h3>
              {% render 'icon-plus' %}
              {% render 'icon-minus' %}
            </summary>
            <div
              class="accordion__content rte"
              id="CollapsibleAccordion-{{ section.id }}"
              role="region"
              aria-labelledby="Summary-{{ section.id }}">
              {%- for block in section.blocks -%}
                {% assign image = block.settings.image %}

                <div class="grid grid--1-col{% if image %} grid--2-col-tablet{% endif %} collapsible-content__grid{% if block.settings.desktop_layout == 'image_second' and image %} collapsible-content__grid--reverse{% endif %}">
                  <div class="grid__item collapsible-content__grid-item">
                    {%- if image != blank -%}
                      <div
                        class="collapsible-content__media collapsible-content__media--{{ block.settings.image_ratio }} media global-media-settings gradient"
                        {% if block.settings.image_ratio == 'adapt' %}
                        style="padding-bottom: {{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;"
                        {% endif %}
                        role="listitem">
                        <img
                          srcset="
                                  {%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
                                  {%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
                                  {%- if image.width >= 535 -%}{{ image | image_url: width: 535 }} 535w,{%- endif -%}
                                  {%- if image.width >= 750 -%}{{ image | image_url: width: 750 }} 750w,{%- endif -%}
                                  {%- if image.width >= 1070 -%}{{ image | image_url: width: 1070 }} 1070w,{%- endif -%}
                                  {%- if image.width >= 1250 -%}{{ image | image_url: width: 1250 }} 1250w,{%- endif -%}
                                  {%- if image.width >= 1500 -%}{{ image | image_url: width: 1500 }} 1500w,{%- endif -%}
                                  {{ image | image_url }} {{ image.width }}w
                                "
                          src="{{ image | image_url: width: 1500 }}"
                          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                          alt="{{ image.alt | escape }}"
                          loading="lazy"
                          width="{{ image.width }}"
                          height="{{ image.height }}">
                      </div>
                    {% endif %}
                  </div>
                  <div class="grid__item customspecs">
                    {%- assign description_splits_h2 = block.settings.row_content | split: '<h2>' -%}
                    {%- assign description_splits_h4 = block.settings.row_content | split: '<h4>' -%}
                    {%- assign all_specifications = '' -%}

                    {%- for split in description_splits_h2 -%}
                        {%- assign heading_split = split | split: '</h2>' -%}
                        {%- if heading_split.size > 1 -%}
                            {%- assign heading_text = heading_split[0] | downcase | strip -%}
                            {%- if heading_text contains 'specification' or heading_text contains 'specs' -%}
                                {%- assign spec_content = heading_split[1] | strip -%}
                                {%- assign all_specifications = all_specifications | append: '<div class="spec-section">' | append: '<h2>' | append: heading_split[0] | append: '</h2>' | append: spec_content | append: '</div>' -%}
                            {%- endif -%}
                        {%- endif -%}
                    {%- endfor -%}

                    {%- for split in description_splits_h4 -%}
                        {%- assign heading_split = split | split: '</h4>' -%}
                        {%- if heading_split.size > 1 -%}
                            {%- assign heading_text = heading_split[0] | downcase | strip -%}
                            {%- if heading_text contains 'specification' or heading_text contains 'specs' -%}
                                {%- assign spec_content = heading_split[1] | strip -%}
                                {%- assign all_specifications = all_specifications | append: '<div class="spec-section">' | append: '<h4>' | append: heading_split[0] | append: '</h4>' | append: spec_content | append: '</div>' -%}
                            {%- endif -%}
                        {%- endif -%}
                    {%- endfor -%}

                    {% comment %} Output if Specs Exist {% endcomment %}
                    <div class="product-specifications">                            
                      {%- if all_specifications != blank -%}
                        {{ all_specifications }}
                      {%- endif -%}
                    </div>

                    {% comment %} New Block: Output ALL Tables (excluding duplicates from spec section) {% endcomment %}
                    {%- assign tables_only = '' -%}
                    {%- assign table_splits = block.settings.row_content | split: '<table' -%}
                    {%- for t in table_splits offset:1 -%}
                      {%- assign table_end_split = t | split: '</table>' -%}
                      {%- if table_end_split.size > 1 -%}
                        {%- assign table_html = '<table' | append: table_end_split[0] | append: '</table>' -%}

                        {%- unless all_specifications contains table_html -%}
                          {%- assign tables_only = tables_only | append: table_html -%}
                        {%- endunless -%}
                      {%- endif -%}
                    {%- endfor -%}

                    {% comment %} Output tables not already included in specifications {% endcomment %}
                    <div class="all-product-tables">
                      {%- if tables_only != blank -%}
                        {{ tables_only }}                      
                      {%- endif -%}
                    </div>
                    

                    {{ block.settings.page.content }}
                  </div>
                </div>
              {% endfor %}
            </div>
          </details>
        </div>
      </div>
    </div>
  </div>
{% endif %}

{% schema %}
  {
    "name": "Product specifications",
    "tag": "section",
    "class": "section",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "default": "Collapsible row",
        "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.label",
        "info": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.info"
      },
      {
        "type": "select",
        "id": "heading_size",
        "options": [
          {
            "value": "h3",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__3.label"
          }
        ],
        "default": "h1",
        "label": "t:sections.all.heading_size.label"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "t:sections.collapsible_content.settings.layout.label",
        "options": [
          {
            "value": "none",
            "label": "t:sections.collapsible_content.settings.layout.options__1.label"
          },
          {
            "value": "row",
            "label": "t:sections.collapsible_content.settings.layout.options__2.label"
          },
          {
            "value": "section",
            "label": "t:sections.collapsible_content.settings.layout.options__3.label"
          }
        ],
        "default": "none"
      },
      {
        "type": "select",
        "id": "color_scheme",
        "options": [
          {
            "value": "accent-1",
            "label": "t:sections.all.colors.accent_1.label"
          },
          {
            "value": "accent-2",
            "label": "t:sections.all.colors.accent_2.label"
          },
          {
            "value": "background-1",
            "label": "t:sections.all.colors.background_1.label"
          },
          {
            "value": "background-2",
            "label": "t:sections.all.colors.background_2.label"
          },
          {
            "value": "inverse",
            "label": "t:sections.all.colors.inverse.label"
          }
        ],
        "default": "background-1",
        "label": "t:sections.all.colors.label"
      },
      {
        "type": "select",
        "id": "page_width",
        "options": [
          {
            "value": "full",
            "label": "Full"
          },
          {
            "value": "normal",
            "label": "Normal"
          },
          {
            "value": "narrow",
            "label": "Narrow"
          }
        ],
        "default": "normal",
        "label": "Section width"
      },
      {
        "type": "header",
        "content": "t:sections.all.padding.section_padding_heading"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      }
    ],
    "blocks": [
      {
        "type": "content",
        "name": "Content",
        "settings": [
          {
            "type": "richtext",
            "id": "row_content",
            "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.row_content.label"
          },
          {
            "type": "page",
            "id": "page",
            "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.page.label"
          },
          {
            "type": "header",
            "content": "t:sections.collapsible_content.settings.header.content"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "t:sections.collapsible_content.settings.image.label"
          },
          {
            "type": "select",
            "id": "image_ratio",
            "options": [
              {
                "value": "adapt",
                "label": "t:sections.collapsible_content.settings.image_ratio.options__1.label"
              },
              {
                "value": "small",
                "label": "t:sections.collapsible_content.settings.image_ratio.options__2.label"
              },
              {
                "value": "large",
                "label": "t:sections.collapsible_content.settings.image_ratio.options__3.label"
              }
            ],
            "default": "adapt",
            "label": "t:sections.collapsible_content.settings.image_ratio.label"
          },
          {
            "type": "select",
            "id": "desktop_layout",
            "options": [
              {
                "value": "image_first",
                "label": "t:sections.collapsible_content.settings.desktop_layout.options__1.label"
              },
              {
                "value": "image_second",
                "label": "t:sections.collapsible_content.settings.desktop_layout.options__2.label"
              }
            ],
            "default": "image_second",
            "label": "t:sections.collapsible_content.settings.desktop_layout.label",
            "info": "t:sections.collapsible_content.settings.desktop_layout.info"
          }

        ]
      }

    ],
    "presets": [
      {
        "name": "Product specifications"
      }
    ]
  }
{% endschema %}