{%- 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 }}" {{ 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>
</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)" }
      ]
    }
  ],
  "presets": [{ "name": "Category tiles", "blocks": [{ "type": "tile" }, { "type": "tile" }, { "type": "tile" }, { "type": "tile" }] }]
}
{% endschema %}