{% extends "base.jinja" %}

{% block content %}
  <section class="section">
    <div class="container">
    <div class="box">
    <h1 class="title">{{ index['title'] }}</h1>
{% set comma = joiner(",") %}
{% for category in index['categories'] %}
      {{ comma() }} <a href="#{{ category }}" class="is-size-4">{{ category }}</a>&nbsp;with&nbsp;{{ index['number_entries'][category] }}&nbsp;item(s)
{% endfor %}
    </div>
{% for category in index['categories'] %}
<div class="box">
    <h2 id="{{ category }}" class="is-size-4">{{ category }}</h2>
    <div class="columns">
{% for entries_column in index['entries'][category] %}
      <div class="column">
        <ul>
{% for entry in entries_column %}
        <li><a href="{{ base['url_to'](entry['href']) }}">{{ entry['name'] }}</a> {% if 'tags' in entry %}<span class="is-light is-size-7">({{ entry['tags'] }})</span>{% endif %}</li>
{% endfor %}
        </ul>
      </div>
{% endfor %}
    </div>
    <a class="is-light is-size-7" href="#">Back to top</a>
</div>
{% endfor %}
    </div>
  </section>
{% endblock %}