{% extends "base.jinja" %}

{% block content %}
  <section class="section">
    <div class="container">
    <div class="box">
    <div class="block"><h1 class="title is-size-4">{{ index['title'] }}</h1></div>
{% set comma = joiner(", ") %}
<div class="is-size-5">
{% for category in index['categories'] -%}
      {{ comma() }} <a href="#{{ category }}" class="has-text-weight-semibold">{{ category }}</a>&nbsp;({{ index['number_entries'][category] }})
{%- endfor %}
</div>
    </div>
{% for category in index['categories'] %}
<div class="box">
    <div class="block"><h2 id="{{ category }}" class="is-size-4 has-text-weight-semibold">{{ category }}</h2></div>
    <div class="columns">
{% for entries_column in index['entries'][category] %}
      <div class="column">
        <ul>
{% for entry in entries_column %}
        <li>{{ macros.render_url(entry['url']) }} {% if 'tags' in entry %}{{ macros.render_text(entry['tags']) }}{% endif %}</li>
{% endfor %}
        </ul>
      </div>
{% endfor %}
    </div>
    <a class="is-light is-size-7" href="#">Back to top</a>
</div>
{% endfor %}
    </div>
  </section>
{% endblock %}