{% extends "base.html" %}

{% block header %}
<header class="hero">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title">
        <span class="icon">
          <i class="fas fa-folder"></i>
          <i class="fas fa-folder" style="position: relative;left: -15px;top: 7px;"></i>
        </span>
        Categories
      </h1>
      <h2 class="subtitle">
        {{ terms | length }} categories in total
      </h2>
    </div>
  </div>
</header>
{% endblock %}

{% block content %}
<section class="section py-0">
  <div class="container">
    {% for category in terms %}
    <span class="my-3 mx-2" style="display: inline-block;">
      <a class="link" href="{{ get_taxonomy_url(kind="categories", name=category.name) }}">
        <span class="icon"><i
            class="fas fa-folder"></i></span>{{ category.name }}<sup>{{ category.pages | length }}</sup>
      </a>
    </span>
    {% endfor %}
  </div>
</section>
{% endblock content %}