{% paginate collection.products by 12 %}

<div class='collection'>
  <header role="banner" class='mha'>
    <div class='outer'>
      <div class='container--l mxa'>
        <h1>{{ collection.title }}</h1>

        {% if collection.description != blank %}
          <div class="rte">
            {{ collection.description }}
          </div>
        {% endif %}

        {% if collection.all_tags.size > 0 %}
          <ul>
            {% for tag in collection.all_tags %}
              {% if current_tags contains tag %}
                <li class="active">
                  {{ tag | link_to_remove_tag: tag }}
                </li>
              {% else %}
                <li>
                  {{ tag | link_to_tag: tag }}
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        {% endif %}
      </div>
    </div>
  </header>

  <section class='collection__grid'>
    <div class='outer'>
      <div class='container--l mxa'>
        <ul class='collection__grid__row f fw'>
          {% for product in collection.products %}
            {% assign url = product.url | within: collection %}
            {% assign price = product.price | money %}
            {% assign comparePrice = product.compare_at_price | money %}
            {% assign image = product.featured_image.src | product_img_url: '600x' %}
            {% assign alt = product.featured_image.alt | escape %}

            <li class='collection__grid__item'>
              <a href='{{ url }}'>
                {%
                  include 'component-image' with
                  src: image,
                  alt: alt
                %}
              </a>
              <a href='{{ url }}'>
                <h3>{{ product.title }}</h3>
              </a>

              <p class=''>
                {% if comparePrice > price %}
                  {% if product.price_varies %}
                    from {{ price }}
                  {% else %}
                    {{ price }} <s>{{ comparePrice }}</s>
                  {% endif %}
                {% else %}
                  {{ price }}
                {% endif %}

                {% unless product.available %}
                  sold out
                {% endunless %}
              </p>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </section>

  {% if paginate.pages > 1 %}
    {{ paginate | default_pagination }}
  {% endif %}
</div>

{% endpaginate %}