Size Chart Modal

<div class="sl-size-chart" style="color:inherit;font-family:inherit;margin:.5rem 0;">
  <button type="button" onclick="this.nextElementSibling.showModal()" style="display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;background:transparent;border:1px solid currentColor;border-radius:.375rem;font-family:inherit;color:inherit;cursor:pointer;font-size:.9rem;">
    <span aria-hidden="true" style="color:var(--sl-accent,#0a5cff);">&#9776;</span>
    {{ section.settings.trigger_text | default: 'Size chart' }}
  </button>
  <dialog style="max-width:min(640px, 92vw);width:100%;border:0;border-radius:.75rem;padding:0;background:inherit;color:inherit;">
    <form method="dialog" style="margin:0;">
      <header style="display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid currentColor;">
        <h2 style="margin:0;font-size:1.15rem;">{{ section.settings.heading | default: 'Size chart' }}</h2>
        <button type="submit" aria-label="Close" style="background:transparent;border:0;color:inherit;font-size:1.25rem;cursor:pointer;line-height:1;">&times;</button>
      </header>
      <div style="padding:1rem 1.25rem;max-height:70vh;overflow:auto;">
        {%- if section.settings.intro != blank -%}
          <p style="margin:0 0 1rem;opacity:.85;">{{ section.settings.intro }}</p>
        {%- endif -%}
        <div style="overflow-x:auto;">
          <table style="width:100%;border-collapse:collapse;font-size:.9rem;">
            <thead>
              <tr>
                <th scope="col" style="padding:.5rem;border-bottom:2px solid var(--sl-accent,#0a5cff);text-align:left;">{{ section.settings.col1 | default: 'Size' }}</th>
                <th scope="col" style="padding:.5rem;border-bottom:2px solid var(--sl-accent,#0a5cff);text-align:left;">{{ section.settings.col2 | default: 'Chest (in)' }}</th>
                <th scope="col" style="padding:.5rem;border-bottom:2px solid var(--sl-accent,#0a5cff);text-align:left;">{{ section.settings.col3 | default: 'Waist (in)' }}</th>
                <th scope="col" style="padding:.5rem;border-bottom:2px solid var(--sl-accent,#0a5cff);text-align:left;">{{ section.settings.col4 | default: 'Length (in)' }}</th>
              </tr>
            </thead>
            <tbody>
              {%- for block in section.blocks -%}
                <tr {{ block.shopify_attributes }}>
                  <th scope="row" style="padding:.5rem;border-bottom:1px solid currentColor;text-align:left;font-weight:600;">{{ block.settings.size }}</th>
                  <td style="padding:.5rem;border-bottom:1px solid currentColor;">{{ block.settings.v1 }}</td>
                  <td style="padding:.5rem;border-bottom:1px solid currentColor;">{{ block.settings.v2 }}</td>
                  <td style="padding:.5rem;border-bottom:1px solid currentColor;">{{ block.settings.v3 }}</td>
                </tr>
              {%- endfor -%}
            </tbody>
          </table>
        </div>
        {%- if section.settings.note != blank -%}
          <p style="margin:1rem 0 0;font-size:.85rem;opacity:.7;">{{ section.settings.note }}</p>
        {%- endif -%}
      </div>
    </form>
  </dialog>
</div>
{% schema %}
{
  "name": "Size Chart Modal",
  "settings": [
    { "type": "text", "id": "trigger_text", "label": "Trigger text", "default": "Size chart" },
    { "type": "text", "id": "heading", "label": "Modal heading", "default": "Size chart" },
    { "type": "text", "id": "intro", "label": "Intro", "default": "Measurements are in inches. Between sizes? Size up for a relaxed fit." },
    { "type": "text", "id": "col1", "label": "Column 1 label", "default": "Size" },
    { "type": "text", "id": "col2", "label": "Column 2 label", "default": "Chest (in)" },
    { "type": "text", "id": "col3", "label": "Column 3 label", "default": "Waist (in)" },
    { "type": "text", "id": "col4", "label": "Column 4 label", "default": "Length (in)" },
    { "type": "text", "id": "note", "label": "Footer note", "default": "Tip: measure a shirt you love and compare." }
  ],
  "blocks": [
    {
      "type": "row",
      "name": "Size row",
      "settings": [
        { "type": "text", "id": "size", "label": "Size", "default": "M" },
        { "type": "text", "id": "v1", "label": "Chest", "default": "40" },
        { "type": "text", "id": "v2", "label": "Waist", "default": "34" },
        { "type": "text", "id": "v3", "label": "Length", "default": "28" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Size Chart Modal",
      "blocks": [
        { "type": "row" },
        { "type": "row" },
        { "type": "row" },
        { "type": "row" }
      ]
    }
  ]
}
{% endschema %}