{% comment %}
  Lookbook – Styled Looks
  Auto-pulls all styled_look metaobject entries.
{% endcomment %}

{%- liquid
  assign section_width = section.settings.section_width
  assign padding_top = section.settings.padding_top
  assign padding_bottom = section.settings.padding_bottom

  assign pt = '0'
  if padding_top == 's'
    assign pt = '1.5rem'
  elsif padding_top == 'm'
    assign pt = '3rem'
  elsif padding_top == 'l'
    assign pt = '4.5rem'
  elsif padding_top == 'xl'
    assign pt = '6rem'
  endif

  assign pb = '0'
  if padding_bottom == 's'
    assign pb = '1.5rem'
  elsif padding_bottom == 'm'
    assign pb = '3rem'
  elsif padding_bottom == 'l'
    assign pb = '4.5rem'
  elsif padding_bottom == 'xl'
    assign pb = '6rem'
  endif
-%}

<section
  class="section styled-looks-lookbook color-{{ section.settings.color_scheme }} gradient"
  style="padding-top: {{ pt }}; padding-bottom: {{ pb }};"
>
  {%- capture width_style -%}
    {% case section_width %}
      {% when 'narrow' %}
        max-width: 960px;
      {% when 'narrower' %}
        max-width: 720px;
      {% when 'fluid' %}
        max-width: 100%;
      {% else %}
        max-width: var(--page-width, 1200px);
    {% endcase %}
  {%- endcapture -%}

  <div
    class="styled-looks-lookbook__inner page-width"
    style="{{ width_style | strip }} margin: 0 auto; padding: 0 1.6rem;"
  >
    {% if section.settings.heading != blank %}
      <header class="styled-looks-lookbook__header">
        <h2 class="styled-looks-lookbook__heading h2">
          {{ section.settings.heading }}
        </h2>
        {% if section.settings.subheading != blank %}
          <p class="styled-looks-lookbook__subheading">
            {{ section.settings.subheading }}
          </p>
        {% endif %}
      </header>
    {% endif %}

    {%- comment -%} Auto-load all Styled look entries {%- endcomment -%}
    {% assign looks = metaobjects.styled_look.values %}

    {% if looks != blank %}
      <div class="styled-looks-lookbook__grid styled-looks-lookbook__grid--{{ section.settings.layout | escape }} color-{{ section.settings.color_scheme_media }}">
        {% for look in looks %}
          {% assign look_image = look.image.value %}
          {% if look_image %}
            <article
              class="styled-looks-lookbook__item"
              data-look-id="{{ look.id }}"
            >
              <div class="styled-looks-lookbook__image-wrap">
                {{ look_image | image_url: width: 1400 | image_tag: loading: 'lazy', class: 'styled-looks-lookbook__image' }}

                <button
                  type="button"
                  class="styled-looks-lookbook__hotspot"
                  data-look-id="{{ look.id }}"
                  aria-label="Shop this look"
                >
                  <span>+</span>
                </button>
              </div>

              {% if look.heading != blank or look.tagline != blank %}
                <div class="styled-looks-lookbook__text">
                  {% if look.heading != blank %}
                    <h3 class="styled-looks-lookbook__title">
                      {{ look.heading }}
                    </h3>
                  {% endif %}
                  {% if look.tagline != blank %}
                    <p class="styled-looks-lookbook__tagline">
                      {{ look.tagline }}
                    </p>
                  {% endif %}
                </div>
              {% endif %}
            </article>
          {% endif %}
        {% endfor %}
      </div>

      {%- comment -%}
        Hidden containers holding product markup per look.
        JS will use these to populate the drawer.
      {%- endcomment -%}
      <div class="styled-looks__data" hidden>
        {% for look in looks %}
          {% assign look_products = look.products.value %}
          {% if look_products != blank %}
            <div class="styled-looks__look-products" data-look-id="{{ look.id }}">
              {% for styled_product in look_products %}
                {% assign p = styled_product %}
                <div class="styled-looks__product-card">
                  {% render 'card-product', card_product: p, loading: 'lazy', show_quick_add: true %}
                </div>
              {% endfor %}
            </div>
          {% endif %}
        {% endfor %}
      </div>

    {% else %}
      <p class="styled-looks-lookbook__empty">
        No Styled look entries found.
      </p>
    {% endif %}
  </div>
</section>

{%- comment -%}
  Drawer markup for "Shop this look".
{%- endcomment -%}
<div
  id="styled-look-drawer"
  class="styled-look-drawer"
  aria-hidden="true"
>
  <div class="styled-look-drawer__overlay"></div>

  <div class="styled-look-drawer__panel">
    <button
      type="button"
      class="styled-look-drawer__close"
      aria-label="Close"
    >
      &times;
    </button>

    <div class="styled-look-drawer__content">
      <h3 class="styled-look-drawer__title">Shop this look</h3>
      <div class="styled-look-drawer__products" data-styled-look-products></div>
    </div>
  </div>
</div>


{% schema %}
{
  "name": "Lookbook Looks",
  "settings": [
    {
      "type": "select",
      "id": "section_width",
      "label": "Section width",
      "default": "page",
      "options": [
        { "value": "page", "label": "Page" },
        { "value": "narrow", "label": "Narrow" },
        { "value": "narrower", "label": "Narrower" },
        { "value": "fluid", "label": "Fluid" }
      ]
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-1"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme_media",
      "label": "Color scheme for media",
      "default": "scheme-1"
    },
    {
      "type": "select",
      "id": "padding_top",
      "label": "Top spacing",
      "default": "m",
      "options": [
        { "value": "no", "label": "No" },
        { "value": "s", "label": "S" },
        { "value": "m", "label": "M" },
        { "value": "l", "label": "L" },
        { "value": "xl", "label": "XL" }
      ]
    },
    {
      "type": "select",
      "id": "padding_bottom",
      "label": "Bottom spacing",
      "default": "m",
      "options": [
        { "value": "no", "label": "No" },
        { "value": "s", "label": "S" },
        { "value": "m", "label": "M" },
        { "value": "l", "label": "L" },
        { "value": "xl", "label": "XL" }
      ]
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Lookbook"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Explore our outfits styled more ways."
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "default": "grid",
      "options": [
        { "value": "grid", "label": "Grid" },
        { "value": "masonry", "label": "Masonry (CSS only)" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lookbook Looks"
    }
  ]
}
{% endschema %}