{%- comment -%} Shop / collection page (design: Homepage v4 SHOP view): category sidebar, sort, 3-up grid. {%- endcomment -%}
{%- liquid
  assign is_all = false
  if collection.handle == 'all' or collection.handle == blank
    assign is_all = true
  endif
  assign sort_by = collection.sort_by | default: collection.default_sort_by
-%}
<div class="jp-pagehero">
  <div class="jp-wrap jp-pagehero__in">
    <div class="jp-kick">{{ section.settings.kicker }}</div>
    <h1 class="jp-h1">{% if is_all %}{{ section.settings.all_title }}{% else %}{{ collection.title }}{% endif %}</h1>
    {%- if collection.description != blank and is_all == false -%}
      <div class="jp-lead">{{ collection.description }}</div>
    {%- else -%}
      <p class="jp-lead">{{ section.settings.intro }}</p>
    {%- endif -%}
  </div>
</div>
<div class="jp-wrap">
  <div class="jp-shop">
    <aside class="jp-side">
      <h5>Categories</h5>
      <nav class="jp-side__list" aria-label="Categories">
        <a href="{{ routes.all_products_collection_url }}"{% if is_all %} class="is-on" aria-current="page"{% endif %}>All products</a>
        {%- if section.settings.menu != blank -%}
          {%- for l in section.settings.menu.links -%}<a href="{{ l.url }}"{% if l.active %} class="is-on" aria-current="page"{% endif %}>{{ l.title }}</a>{%- endfor -%}
        {%- else -%}
          {%- for c in collections -%}
            {%- unless c.handle == 'frontpage' or c.handle == 'all' or c.handle == 'refrigerated' or c.products_count == 0 -%}
              <a href="{{ c.url }}"{% if c.handle == collection.handle %} class="is-on" aria-current="page"{% endif %}>{{ c.title }}</a>
            {%- endunless -%}
          {%- endfor -%}
        {%- endif -%}
      </nav>
    </aside>
    <div>
      {%- paginate collection.products by section.settings.per_page -%}
      <div class="jp-shop__bar">
        <span>{{ collection.products_count }} product{% if collection.products_count != 1 %}s{% endif %}{% unless is_all %} in {{ collection.title }}{% endunless %}</span>
        <label style="display:flex;align-items:center;gap:8px">Sort:
          <select class="jp-select" data-jp-sort aria-label="Sort products">
            {%- for o in collection.sort_options -%}
              <option value="{{ o.value }}"{% if o.value == sort_by %} selected{% endif %}>{{ o.name }}</option>
            {%- endfor -%}
          </select>
        </label>
      </div>
      <div class="jp-grid jp-grid--3">
        {%- for p in collection.products -%}
          {% render 'jp-card', product: p %}
        {%- else -%}
          <p class="jp-empty" style="grid-column:1/-1">No products here yet.</p>
        {%- endfor -%}
      </div>
      {%- if paginate.pages > 1 -%}
        <nav class="jp-pag" aria-label="Pages">
          {%- for part in paginate.parts -%}
            {%- if part.is_link -%}<a href="{{ part.url }}">{{ part.title }}</a>{%- else -%}<span{% if part.title == paginate.current_page %} class="is-on" aria-current="page"{% endif %}>{{ part.title }}</span>{%- endif -%}
          {%- endfor -%}
        </nav>
      {%- endif -%}
      {%- endpaginate -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "Shop grid",
  "settings": [
    { "type": "text", "id": "kicker", "label": "Kicker", "default": "Shop" },
    { "type": "text", "id": "all_title", "label": "Title on 'all products'", "default": "All products" },
    { "type": "textarea", "id": "intro", "label": "Intro", "default": "Filter by category. Every card shows the protein per serving and whether the label has been verified." },
    { "type": "link_list", "id": "menu", "label": "Category menu", "info": "Empty = every collection with products." },
    { "type": "range", "id": "per_page", "label": "Products per page", "min": 12, "max": 48, "step": 6, "default": 24 }
  ]
}
{% endschema %}