{%- comment -%} Category tiles (design: Homepage v4 category row). The tile image is the collection banner image, else its first product's pack shot. No product name is shown under the label. {%- endcomment -%}
<section class="jp-wrap">
  <div class="jp-cats">
    {%- for block in section.blocks -%}
      {%- liquid
        assign c = block.settings.collection
        assign url = routes.all_products_collection_url
        assign label = block.settings.label
        assign sub = block.settings.sub
        assign img = block.settings.image
        assign cover = false
        if img != blank
          assign cover = true
        endif
        if c != blank
          assign url = c.url
          if label == blank
            assign label = c.title
          endif
          if img == blank
            if c.image != blank
              assign img = c.image
              assign cover = true
            else
              assign img = c.products.first.featured_image
            endif
          endif
        endif
      -%}
      <a class="jp-cat" href="{{ url }}"{% if block.settings.panel and c != blank %} data-panel="jp-cpanel-{{ block.id }}" aria-expanded="false" aria-controls="jp-cpanel-{{ block.id }}"{% endif %} {{ block.shopify_attributes }}>
        <span class="jp-cat__img{% if cover %} jp-cat__img--cover{% endif %}">
          {%- if img != blank -%}
            {{ img | image_url: width: 500 | image_tag: loading: 'lazy', alt: '', sizes: '(min-width: 1000px) 190px, 33vw', widths: '250,400,500' }}
          {%- else -%}
            {{ 'collection-1' | placeholder_svg_tag: 'jp-ph' }}
          {%- endif -%}
        </span>
        <span class="jp-cat__lab"><b>{{ label | default: 'All products' }}</b>{%- if sub != blank -%}<span>{{ sub }}</span>{%- endif -%}</span>
      </a>
    {%- endfor -%}
  </div>
  {%- for block in section.blocks -%}
    {%- if block.settings.panel and block.settings.collection != blank -%}
      {%- assign pc = block.settings.collection -%}
      <div class="jp-cpanel" id="jp-cpanel-{{ block.id }}" hidden>
        <div class="jp-cpanel__hd">
          <h3 class="jp-h2">{{ block.settings.label | default: pc.title }}</h3>
          <a class="jp-pill" href="{{ pc.url }}">See all {{ pc.products_count }} →</a>
          <button type="button" class="jp-cpanel__x" data-close aria-label="Close {{ pc.title | escape }}">&times;</button>
        </div>
        <div class="jp-grid jp-grid--4">
          {%- for cp in pc.products limit: 8 -%}{% render 'jp-card', product: cp %}{%- endfor -%}
        </div>
      </div>
    {%- endif -%}
  {%- endfor -%}
</section>
{% schema %}
{
  "name": "Category tiles",
  "max_blocks": 8,
  "blocks": [
    {
      "type": "tile",
      "name": "Tile",
      "settings": [
        { "type": "collection", "id": "collection", "label": "Collection", "info": "Empty = all products." },
        { "type": "text", "id": "label", "label": "Label (optional)" },
        { "type": "text", "id": "sub", "label": "Small line (optional)", "info": "Defaults to the collection's first product." },
        { "type": "image_picker", "id": "image", "label": "Image (optional)" },
        { "type": "checkbox", "id": "panel", "label": "Open the products in place on the home page", "default": false }
      ]
    }
  ],
  "presets": [{ "name": "Category tiles", "blocks": [{ "type": "tile" }, { "type": "tile" }, { "type": "tile" }, { "type": "tile" }] }]
}
{% endschema %}