{{ 'lf-northline.css' | asset_url | stylesheet_tag }}
{% if section.settings.layout == 'product' %}<script src="{{ 'lf-northline.js' | asset_url }}" defer></script>{% endif %}
{% liquid
  assign layout = section.settings.layout
  assign chosen_product = section.settings.product
  assign chosen_variant = chosen_product.selected_or_first_available_variant
  assign anchor = section.settings.anchor | handleize
  if anchor == blank
    assign anchor = section.id
  endif
  assign hero_image = section.settings.image
  if hero_image == blank and layout == 'product' and chosen_product != blank
    assign hero_image = chosen_variant.featured_image | default: chosen_product.featured_image
  endif
%}
<section id="{{ anchor }}" class="lf-northline lf-{{ layout }}" style="--lf-bg:{{ section.settings.background }};--lf-ink:{{ section.settings.text_color }}">
<lf-page-product>
  {% if layout == 'hero' or layout == 'story' or layout == 'product' %}
    <div class="lf-media">
      <div class="lf-gallery-main" id="lf-media-{{ section.id }}">
      {% if hero_image != blank %}
        {{ hero_image | image_url: width: 2000 | image_tag: widths: '480, 768, 1200, 1600, 2000', sizes: '(max-width: 749px) 100vw, 60vw' }}
      {% elsif section.settings.concept_image != blank %}
        <img src="{{ section.settings.concept_image | asset_url }}" alt="{{ section.settings.heading | escape }}" width="1536" height="1024" {% unless layout == 'hero' or layout == 'product' %}loading="lazy"{% endunless %}>
      {% endif %}
      </div>
      {% if layout == 'product' %}
        <div class="lf-gallery-controls" role="group" aria-label="Product photos">
          {% if chosen_product != blank %}
            {% for photo in chosen_product.images limit: 8 %}
              <button type="button" data-lf-gallery-src="{{ photo | image_url: width: 1600 }}" data-lf-gallery-alt="{{ photo.alt | default: chosen_product.title | escape }}" aria-label="View product photo {{ forloop.index }}" aria-controls="lf-media-{{ section.id }}" aria-pressed="{% if photo.id == hero_image.id %}true{% else %}false{% endif %}">{{ photo | image_url: width: 180 | image_tag: loading: 'lazy' }}</button>
            {% endfor %}
          {% elsif section.settings.concept_image != blank %}
            <button type="button" data-lf-gallery-src="{{ section.settings.concept_image | asset_url }}" data-lf-gallery-alt="{{ section.settings.heading | escape }}" aria-controls="lf-media-{{ section.id }}" aria-label="View concept product" aria-pressed="true"><img src="{{ section.settings.concept_image | asset_url }}" alt="" width="90" height="65"></button>
            {% if section.settings.concept_detail_image != blank %}<button type="button" data-lf-gallery-src="{{ section.settings.concept_detail_image | asset_url }}" data-lf-gallery-alt="Inside the fictional NORTHLINE weekender" aria-controls="lf-media-{{ section.id }}" aria-label="View concept interior" aria-pressed="false"><img src="{{ section.settings.concept_detail_image | asset_url }}" alt="" width="90" height="65"></button>{% endif %}
          {% endif %}
        </div>
      {% endif %}
    </div>
  {% endif %}
  <div class="lf-copy">
    <p class="lf-eyebrow">{{ section.settings.eyebrow | escape }}</p>
    {% if layout == 'hero' or layout == 'product' %}<h1>{{ section.settings.heading | escape | newline_to_br }}</h1>{% else %}<h2>{{ section.settings.heading | escape | newline_to_br }}</h2>{% endif %}
    <div class="lf-body">{{ section.settings.body }}</div>
    {% if layout == 'product' %}
      {% if chosen_product != blank %}
        <p class="lf-product-title">{{ chosen_product.title | escape }}</p>
        <p class="lf-price" data-lf-price>{{ chosen_variant.price | money }}</p>
        {% if chosen_product.variants_count > 250 %}
          <a class="lf-button" href="{{ chosen_product.url }}">Choose options on product page →</a>
        {% else %}
          {% assign form_id = 'lf-product-' | append: section.id %}
          {% form 'product', chosen_product, id: form_id %}
            <label class="lf-variant-label" for="lf-variant-{{ section.id }}">Choose your option</label>
            <select id="lf-variant-{{ section.id }}" name="id" data-lf-variant>
              {% for variant in chosen_product.variants %}
                <option value="{{ variant.id }}" {% if variant.id == chosen_variant.id %}selected{% endif %} data-price="{{ variant.price | money | escape }}" data-available="{{ variant.available }}" data-image-alt="{{ chosen_product.title | escape }} — {{ variant.title | escape }}" data-image="{% if variant.featured_image %}{{ variant.featured_image | image_url: width: 1600 }}{% elsif chosen_product.featured_image %}{{ chosen_product.featured_image | image_url: width: 1600 }}{% endif %}">{{ variant.title | escape }} — {{ variant.price | money }}{% unless variant.available %} — Sold out{% endunless %}</option>
              {% endfor %}
            </select>
            <button type="submit" class="lf-button" data-lf-add {% unless chosen_variant.available %}disabled{% endunless %}><span data-lf-add-label>{% if chosen_variant.available %}Add to cart{% else %}Sold out{% endif %}</span><svg class="commerce-icon" aria-hidden="true" focusable="false"><use href="{{ 'commerce-icons.svg' | asset_url }}#bag"></use></svg></button>
            {{ form.errors | default_errors }}
          {% endform %}
        {% endif %}
      {% else %}
        <p class="lf-setup">Concept preview. Select a real catalog product in the Theme Editor to enable its price, variants and native cart form.</p>
      {% endif %}
    {% elsif section.settings.button_link != blank %}
      <a class="lf-button" href="{{ section.settings.button_link }}">{{ section.settings.button_text | escape }} <span aria-hidden="true">→</span></a>
    {% endif %}
  </div>
  {% if layout == 'products' %}<div class="lf-products">
    {% for block in section.blocks %}
      {% assign item = block.settings.product %}
      <article {{ block.shopify_attributes }}>
        <div class="lf-product-photo">
        {% if item.featured_image != blank %}{{ item.featured_image | image_url: width: 1000 | image_tag: loading: 'lazy', widths: '360, 600, 1000', sizes: '(max-width: 749px) 44vw, 40vw' }}
        {% elsif block.settings.image != blank %}{{ block.settings.image | image_url: width: 1000 | image_tag: loading: 'lazy' }}
        {% elsif block.settings.concept_image != blank %}<img src="{{ block.settings.concept_image | asset_url }}" alt="{{ block.settings.heading | escape }}" width="1024" height="1536" loading="lazy">{% endif %}
        </div>
        <div class="lf-product-category"><svg class="commerce-icon" aria-hidden="true" focusable="false"><use href="{{ 'commerce-icons.svg' | asset_url }}#{{ block.settings.icon }}"></use></svg><span>{{ block.settings.label | escape }}</span></div>
        {% if item != blank %}
          <h3><a href="{{ item.url }}">{{ item.title | escape }}</a></h3><p>{{ item.price | money }}</p>
          {% if item.has_only_default_variant and item.available %}
            {% assign card_form_id = 'lf-card-' | append: section.id | append: '-' | append: block.id %}
            {% form 'product', item, id: card_form_id %}<input type="hidden" name="id" value="{{ item.selected_or_first_available_variant.id }}"><button type="submit" class="lf-button">Add to cart<svg class="commerce-icon" aria-hidden="true" focusable="false"><use href="{{ 'commerce-icons.svg' | asset_url }}#bag"></use></svg></button>{% endform %}
          {% elsif item.available %}<a class="lf-button" href="{{ item.url }}">Choose options →</a>{% else %}<p>Sold out</p>{% endif %}
        {% else %}
          <h3>{{ block.settings.heading | escape }}</h3>{{ block.settings.body }}<p class="lf-setup">Concept product. Select a catalog product to enable purchasing.</p>
        {% endif %}
        {% if block.settings.usage_body != blank %}<details class="lf-product-notes"><summary>{{ block.settings.usage_heading | escape }}</summary>{{ block.settings.usage_body }}</details>{% endif %}
      </article>
    {% endfor %}
  </div>
  {% elsif section.blocks.size > 0 %}<div class="lf-blocks">
    {% for block in section.blocks %}
      {% if layout == 'faq' %}<details {{ block.shopify_attributes }}><summary>{{ block.settings.heading | escape }}</summary>{{ block.settings.body }}</details>
      {% else %}<article {{ block.shopify_attributes }}>{% if block.settings.icon != 'none' %}<svg class="commerce-icon" aria-hidden="true" focusable="false"><use href="{{ 'commerce-icons.svg' | asset_url }}#{{ block.settings.icon }}"></use></svg>{% endif %}<span class="lf-label">{{ block.settings.label | escape }}</span><h3>{{ block.settings.heading | escape }}</h3>{{ block.settings.body }}</article>{% endif %}
    {% endfor %}
  </div>{% endif %}
</lf-page-product>
</section>
{% schema %}
{
  "name": "NORTHLINE page section",
  "settings": [
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        {
          "value": "product",
          "label": "Product"
        },
        {
          "value": "specs",
          "label": "Specs"
        },
        {
          "value": "story",
          "label": "Story"
        },
        {
          "value": "features",
          "label": "Features"
        },
        {
          "value": "faq",
          "label": "Faq"
        },
        {
          "value": "cta",
          "label": "Cta"
        }
      ],
      "default": "product"
    },
    {
      "type": "text",
      "id": "anchor",
      "label": "Anchor ID",
      "info": "Unique section anchor used by links, without #."
    },
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow"
    },
    {
      "type": "textarea",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "body",
      "label": "Body"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "concept_image",
      "label": "Fallback theme asset filename",
      "info": "Included concept image. Clear this after selecting your own image."
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button text"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#f8f6ef"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#29271e"
    },
    {
      "type": "product",
      "id": "product",
      "label": "Hero product"
    },
    {
      "type": "text",
      "id": "concept_detail_image",
      "label": "Fallback detail asset filename"
    }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Content item",
      "settings": [
        {
          "type": "select",
          "id": "icon",
          "label": "Detail icon",
          "default": "none",
          "options": [
            {
              "value": "none",
              "label": "None"
            },
            {
              "value": "drop",
              "label": "Drop"
            },
            {
              "value": "layers",
              "label": "Layers"
            },
            {
              "value": "sun",
              "label": "Sun"
            },
            {
              "value": "moon",
              "label": "Moon"
            },
            {
              "value": "bag",
              "label": "Bag"
            },
            {
              "value": "handle",
              "label": "Handle"
            },
            {
              "value": "pocket",
              "label": "Pocket"
            },
            {
              "value": "expand",
              "label": "Expand"
            }
          ]
        },
        {
          "type": "text",
          "id": "label",
          "label": "Number / label"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "body",
          "label": "Body"
        }
      ]
    }
  ],
  "max_blocks": 6,
  "presets": [
    {
      "name": "NORTHLINE page section"
    }
  ]
}
{% endschema %}
