
<div class="page-width">
  <header class="section-header text-center">
    <h1>{{ page_title }}</h1>
  </header>
  
  {%- assign blocks = section.blocks | sort: 'collection.all_products_count' -%}
  
  {% case section.settings.grid %}
    {% when '2' %}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
      {%- assign image_size = '530x' -%}
    {% when '3' %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
      {%- assign image_size = '350x' -%}
    {% when '4' %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
      {%- assign image_size = '250x' -%}
    {% when '5' %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
      {%- assign image_size = '225x' -%}
  {% endcase %}
  
  <div class="grid grid--uniform">
    {% if section.settings.display_type == 'all' %}
      {% case section.settings.sort %}
        {% when 'products_high' or 'products_low' %}
          {%- assign collections = collections | sort: 'all_products_count' -%}
        {% when 'date' or 'date_reversed' %}
          {%- assign collections = collections | sort: 'published_at' -%}
      {% endcase %}
      {% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}
        {% for collection in collections %}
          <div class="grid__item {{ grid_item_width }}">
            {% include 'collection-grid-item', collection_image_size: image_size %}
          </div>
        {% endfor %}
      {% else %}
        {% for collection in collections reversed %}
          <div class="grid__item {{ grid_item_width }}">
            {% include 'collection-grid-item', collection_image_size: image_size %}
          </div>
        {% endfor %}
      {% endif %}
    {% else %}
      {% for block in section.blocks %}
        <div class="grid__item {{ grid_item_width }}">
          {%- assign collection = collections[block.settings.collection] -%}
          {% include 'collection-grid-item', collection_image_size: image_size %}
        </div>
      {% endfor %}
    {% endif %}
  </div>
</div>

{% schema %}
  {
    "name": "Collections list page",
    "settings": [
      {
        "type": "paragraph",
        "content": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections."
      },
      {
        "type": "radio",
        "id": "display_type",
        "label": "Select collections to show",
        "default": "all",
        "options": [
          {
            "value": "all",
            "label": "All"
          },
          {
            "value": "selected",
            "label": "Selected"
          }
        ]
      },
      {
        "type": "select",
        "id": "sort",
        "label": "Sort collections by:",
        "info": "Sorting only applies when 'All' is selected",
        "default": "alphabetical",
        "options": [
          {
            "value": "products_high",
            "label": "Product count, high to low"
          },
          {
            "value": "products_low",
            "label": "Product count, low to high"
          },
          {
            "value": "alphabetical",
            "label": "Alphabetically, A-Z"
          },
          {
            "value": "alphabetical_reversed",
            "label": "Alphabetically, Z-A"
          },
          {
            "value": "date",
            "label": "Date, old to new"
          },
          {
            "value": "date_reversed",
            "label": "Date, new to old"
          }
        ]
      },
      {
        "type": "select",
        "id": "grid",
        "label": "Collections per row",
        "default": "3",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "show_view_all",
        "label": "Show 'View all' button",
        "default": true
      },
	  {
        "type": "text",
        "id": "btn_text",
        "label": "Button Text",
        "default": "View All"
      }
    ],
    "blocks": [
      {
        "type": "collection",
        "name": "Collection",
        "settings": [
          {
            "label": "Collection",
            "id": "collection",
            "type": "collection"
          }
        ]
      }
    ]
  }
{% endschema %}
