{% extends "base.html" %}

{% block content %}
<main class="x xdc">
  <div class="x xdc bg-xdr">
    <section class="bdb-gray bg-w75 bg-xo2">
      {% for block in doc.blocks %}
      {% if block.type == 'image' %}
      {% include "partials/block-image-cover.html" %}
      {% endif %}
      {% endfor %}
    </section>
    <section class="x xw xdr bdb-gray pt1-7 pr0-85 pb1-7 pl0-85 bg-w25 bg-xo1 bg-bdr-gray">
      <div class="x xdr bg-xdc w50 md-w25 bg-w100 g-4-16">
	<div class="x xdc">
	  <h3 class="fgc-gray ttu pb1-7">categories</h3>
	  {% for cat in categories.keys() %}
	  <a href="#{{ cat | lower }}" class="fgc-cyan ttu{% if not loop.last %} pb1-7{% endif %}">{{ cat }}</a>
	  {% endfor %}
	</div>
	<div class="x xdc">
	  <h3 class="fgc-gray ttu pb1-7">set</h3>
	  {% for set in sets %}
	  <a href="/{{ set.path }}" class="fgc-cyan ttu{% if not loop.last %} pb1-7{% endif %}">{{ set.title }}</a>
	  {% endfor %}
	</div>
      </div>
    </section>
  </div>
  {% for cat, products in categories.items() %}
  <section class="copy-h">
    <h2 id="{{ cat | lower }}" class="bdb-gray">{{ cat }}</h2>
    <div class="dg grid-2 related-products">
      {% for product in products %}
      {% set block = product.blocks[0] %}
      {% include "partials/grid-product.html" %}
      {% endfor %}
  </section>
  {% endfor %}
</main>
{% include "partials/footer.html" %}
{% endblock %}