{%- comment -%}
  Size Guide — measurement table in a modal, plus optional model-fit note.
  Apparel conversion staple: cuts returns and answers the #1 PDP question.
  Rows are blocks so any size system works (letter, numeric, EU/UK/US).
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
-%}

{% style %}
  .sg-{{ uid }} { padding-top: {{ s.padding_top }}px; padding-bottom: {{ s.padding_bottom }}px; }
  .sg-{{ uid }}__trigger {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; padding: 6px 0; cursor: pointer;
    font-size: 15px; color: inherit;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .sg-{{ uid }}__trigger svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .sg-{{ uid }}__modal {
    border: 0; padding: 0; max-width: 640px; width: 92vw;
    border-radius: {{ s.corner_radius }}px;
    background: {{ s.modal_bg }}; color: {{ s.modal_text }};
  }
  .sg-{{ uid }}__modal::backdrop { background: rgba(0,0,0,.55); }
  .sg-{{ uid }}__inner { padding: 24px; }
  .sg-{{ uid }}__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    margin-bottom: 4px;
  }
  .sg-{{ uid }}__close {
    background: none; border: 0; cursor: pointer; font-size: 26px; line-height: 1;
    color: inherit; padding: 0 4px;
  }
  .sg-{{ uid }}__scroll { overflow-x: auto; margin-top: 16px; }
  .sg-{{ uid }}__table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .sg-{{ uid }}__table th,
  .sg-{{ uid }}__table td {
    padding: 10px 12px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid {{ s.rule_color }};
  }
  .sg-{{ uid }}__table thead th {
    font-weight: 600; background: {{ s.header_bg }}; color: {{ s.header_text }};
    position: sticky; top: 0;
  }
  .sg-{{ uid }}__table tbody tr:last-child td { border-bottom: 0; }
  {%- if s.zebra -%}
  .sg-{{ uid }}__table tbody tr:nth-child(even) { background: {{ s.zebra_color }}; }
  {%- endif -%}
  .sg-{{ uid }}__note { margin-top: 16px; font-size: 14px; opacity: .85; }
  .sg-{{ uid }}__fit {
    margin-top: 16px; padding: 12px 14px; border-radius: 8px;
    background: {{ s.fit_bg }}; color: {{ s.fit_text }}; font-size: 14px;
  }
{% endstyle %}

<div class="sg-{{ uid }} color-{{ s.color_scheme }} gradient">
  <div class="{% if s.full_width == false %}page-width{% endif %}">
    <button type="button" class="sg-{{ uid }}__trigger" data-sg-open="{{ uid }}">
      {%- if s.show_icon -%}
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
          <rect x="2" y="7" width="20" height="10" rx="2"/>
          <path d="M6 7v3M10 7v5M14 7v3M18 7v5"/>
        </svg>
      {%- endif -%}
      {{ s.trigger_text | escape }}
    </button>
  </div>
</div>

<dialog class="sg-{{ uid }}__modal" id="sg-modal-{{ uid }}">
  <div class="sg-{{ uid }}__inner">
    <div class="sg-{{ uid }}__head">
      <h2 class="h3" style="margin:0">{{ s.modal_heading | escape }}</h2>
      <button type="button" class="sg-{{ uid }}__close" data-sg-close="{{ uid }}" aria-label="Close">&times;</button>
    </div>

    {%- if s.intro != blank -%}<div>{{ s.intro }}</div>{%- endif -%}

    {%- if section.blocks.size > 0 -%}
      <div class="sg-{{ uid }}__scroll">
        <table class="sg-{{ uid }}__table">
          <thead>
            <tr>
              <th scope="col">{{ s.col_1 | escape }}</th>
              {%- if s.col_2 != blank -%}<th scope="col">{{ s.col_2 | escape }}</th>{%- endif -%}
              {%- if s.col_3 != blank -%}<th scope="col">{{ s.col_3 | escape }}</th>{%- endif -%}
              {%- if s.col_4 != blank -%}<th scope="col">{{ s.col_4 | escape }}</th>{%- endif -%}
              {%- if s.col_5 != blank -%}<th scope="col">{{ s.col_5 | escape }}</th>{%- endif -%}
            </tr>
          </thead>
          <tbody>
            {%- for block in section.blocks -%}
              <tr {{ block.shopify_attributes }}>
                <th scope="row" style="font-weight:600">{{ block.settings.v1 | escape }}</th>
                {%- if s.col_2 != blank -%}<td>{{ block.settings.v2 | escape }}</td>{%- endif -%}
                {%- if s.col_3 != blank -%}<td>{{ block.settings.v3 | escape }}</td>{%- endif -%}
                {%- if s.col_4 != blank -%}<td>{{ block.settings.v4 | escape }}</td>{%- endif -%}
                {%- if s.col_5 != blank -%}<td>{{ block.settings.v5 | escape }}</td>{%- endif -%}
              </tr>
            {%- endfor -%}
          </tbody>
        </table>
      </div>
    {%- endif -%}

    {%- if s.fit_note != blank -%}
      <div class="sg-{{ uid }}__fit">{{ s.fit_note }}</div>
    {%- endif -%}
    {%- if s.measure_note != blank -%}
      <div class="sg-{{ uid }}__note">{{ s.measure_note }}</div>
    {%- endif -%}
  </div>
</dialog>

<script>
  (() => {
    const dlg = document.getElementById('sg-modal-{{ uid }}');
    if (!dlg) return;
    document.querySelectorAll('[data-sg-open="{{ uid }}"]').forEach(b =>
      b.addEventListener('click', () => dlg.showModal ? dlg.showModal() : dlg.setAttribute('open','')));
    document.querySelectorAll('[data-sg-close="{{ uid }}"]').forEach(b =>
      b.addEventListener('click', () => dlg.close ? dlg.close() : dlg.removeAttribute('open')));
    dlg.addEventListener('click', e => { if (e.target === dlg) dlg.close(); });
  })();
</script>

{% schema %}
{
  "name": "Size Guide",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "text", "id": "trigger_text", "label": "Link text", "default": "Size guide" },
    { "type": "checkbox", "id": "show_icon", "label": "Show ruler icon", "default": true },
    { "type": "checkbox", "id": "full_width", "label": "Full width", "default": false },
    { "type": "header", "content": "Modal" },
    { "type": "text", "id": "modal_heading", "label": "Modal heading", "default": "Size guide" },
    { "type": "richtext", "id": "intro", "label": "Intro text" },
    { "type": "richtext", "id": "fit_note", "label": "Fit note", "info": "e.g. Model is 175cm and wears a size S." },
    { "type": "richtext", "id": "measure_note", "label": "How to measure" },
    { "type": "header", "content": "Columns", "info": "Leave a column blank to hide it." },
    { "type": "text", "id": "col_1", "label": "Column 1", "default": "Size" },
    { "type": "text", "id": "col_2", "label": "Column 2", "default": "Bust (cm)" },
    { "type": "text", "id": "col_3", "label": "Column 3", "default": "Waist (cm)" },
    { "type": "text", "id": "col_4", "label": "Column 4", "default": "Hip (cm)" },
    { "type": "text", "id": "col_5", "label": "Column 5" },
    { "type": "header", "content": "Style" },
    { "type": "range", "id": "corner_radius", "min": 0, "max": 28, "step": 2, "unit": "px", "label": "Corner radius", "default": 12 },
    { "type": "color", "id": "modal_bg", "label": "Modal background", "default": "#ffffff" },
    { "type": "color", "id": "modal_text", "label": "Modal text", "default": "#111111" },
    { "type": "color", "id": "header_bg", "label": "Table header background", "default": "#111111" },
    { "type": "color", "id": "header_text", "label": "Table header text", "default": "#ffffff" },
    { "type": "color", "id": "rule_color", "label": "Row divider", "default": "#e6e6e6" },
    { "type": "checkbox", "id": "zebra", "label": "Alternate row shading", "default": true },
    { "type": "color", "id": "zebra_color", "label": "Alternate row colour", "default": "#fafafa" },
    { "type": "color", "id": "fit_bg", "label": "Fit note background", "default": "#f4f1ec" },
    { "type": "color", "id": "fit_text", "label": "Fit note text", "default": "#111111" },
    { "type": "header", "content": "Section" },
    { "type": "color_scheme", "id": "color_scheme", "label": "Colour scheme", "default": "scheme-1" },
    { "type": "range", "id": "padding_top", "min": 0, "max": 60, "step": 2, "unit": "px", "label": "Top padding", "default": 8 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 60, "step": 2, "unit": "px", "label": "Bottom padding", "default": 8 }
  ],
  "blocks": [
    {
      "type": "row",
      "name": "Size row",
      "settings": [
        { "type": "text", "id": "v1", "label": "Column 1", "default": "S" },
        { "type": "text", "id": "v2", "label": "Column 2", "default": "84" },
        { "type": "text", "id": "v3", "label": "Column 3", "default": "66" },
        { "type": "text", "id": "v4", "label": "Column 4", "default": "90" },
        { "type": "text", "id": "v5", "label": "Column 5" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Size Guide",
      "blocks": [
        { "type": "row", "settings": { "v1": "XS", "v2": "80", "v3": "62", "v4": "86" } },
        { "type": "row", "settings": { "v1": "S",  "v2": "84", "v3": "66", "v4": "90" } },
        { "type": "row", "settings": { "v1": "M",  "v2": "88", "v3": "70", "v4": "94" } },
        { "type": "row", "settings": { "v1": "L",  "v2": "94", "v3": "76", "v4": "100" } },
        { "type": "row", "settings": { "v1": "XL", "v2": "100", "v3": "82", "v4": "106" } }
      ]
    }
  ]
}
{% endschema %}
