{{ '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">
      {% 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>
  {% 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 %}>{% if chosen_variant.available %}Add to cart{% else %}Sold out{% endif %}</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>
        {% 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</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 %}
      </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 }}><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"
    }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Content item",
      "settings": [
        {
          "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 %}
