{% extends "base.html" %}

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

{% block main %}

  <div class="g-Paragraph g-Payments__Header">
    <a class="g-Button__Validate" href="/category">Nouveau</a>
  </div>

  {% if not categories %}

    <div class="g-Payments__NoResults">
      Il n’y a aucune catégorie.
    </div>

  {% else %}

    <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"
            style="color: {{ category.color }}"
          >
            {{ category.name }}
          </span>
        </a>
      {% endfor %}
    </div>

  {% endif %}
{% endblock main %}