{{ 'collection.aio.min.css' | asset_url | stylesheet_tag }}
{{ 'pagination.aio.min.css' | asset_url | stylesheet_tag }}

{%- paginate collections by section.settings.limit -%}
  <div class="section-list-collection">
    <div class="section-header">
      <h1 class="page-title">
        {%- if section.settings.heading != blank -%}{{ section.settings.heading }}{%- else -%}{{ page_title }}{%- endif -%}
      </h1>
    </div>
    <div class="section-body">
      <div class="list-collections {% render 'grid-class', value: section.settings.items_resp -%}">
        {%- for collection in collections -%}
          <div class="collection-card">
            <div class="collection-card_image">
              <a href="{{ collection.url }}">
                {%- render 'image-style', image: collection.image -%}
              </a>
            </div>
            <div class="collection-card_title text-center">
              <a href="{{ collection.url }}">{{ collection.title }}</a>
            </div>
          </div>
        {%- endfor -%}
      </div>
    </div>

    <div class="section-footer">
      {%- render 'pagination', paginate: paginate -%}
    </div>
  </div>
{%- endpaginate -%}

{%- style -%}
  {%- render 'grid-spacing', preClassID: '.page-list-collections', classID: ' .section-list-collection .d-grid' -%}
{%- endstyle -%}

{%- schema -%}
{
  "name": "t:sections.list-collections-template.name",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.common.heading",
      "default": "Collections"
    },
    {
      "type": "text",
      "id": "items_resp",
      "label": "t:sections.common.items_per_row",
      "default": "4,3,2"
    },
    {
      "type": "range",
      "id": "limit",
      "label": "t:sections.common.items_per_page",
      "step": 1,
      "min": 1,
      "max": 50,
      "default": 24
    }
  ]
}
{%- endschema -%}