{% extends "base.html" %}

{% block title %}
  Catégories
{% endblock title %}

{% block main %}

  <section class="g-Section">

    {% if not categories %}
      <div class="g-Table__NoResults">
        Il n’y a aucune catégorie.
      </div>
    {% endif %}

    <div class="g-Paragraph">
      <a class="g-Button__Validate" href="/category">Ajouter une catégorie</a>
    </div>

    {% if categories %}
      <div class="g-Table">
        {% for category in categories %}
          <a
            class="g-Table__Row {% if highlight == category.id %} g-Table__Row--Highlight {% endif %}"
            href="/category/{{ category.id }}"
          >
            <span
              class="g-Table__Cell"
              is="colored-category" 
              data-color="{{ category.color }}"
            >
              {{ category.name }}
            </span>
          </a>
        {% endfor %}
      </div>
    {% endif %}

  </section>

{% endblock main %}