{% extends "base.html" %}

{%- block main -%}
  {% if shades %}<section>
    <ul style="list-style: none; background: linear-gradient(black, white, white)">
      {% for shade in shades %}
        <li><a href="={{ shade.value|xURI }}{{Q}}" style="color: {{ shade.value }}">
            {{ shade.label }}
        </a></li>
      {% endfor %}
    </ul>
  </section>{% endif %}
  <section>
    <ul style="list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px">
      {% for colour in colours %}
        <li><a href="{% if subfolder %}../{% endif %}{{ colour.label|xURI }}/={{ colour.value|xURI }}{{Q}}"
            style="color: {{ colour.value }}">{{ colour.label }}</a></li>
      {% endfor %}
    </ul>
  </section>
{%- endblock -%}