{% extends "base.jinja" %}
{% block content %}
<section class="section">
<div class="container">
  <div class="box">
    <div class="block">
      <h1 class="title">{{ macros.render_element(index['title']) }}</h1>
      {%- if 'subtitle' in index -%}
      <h2 class="subtitle">{{ macros.render_element(index['subtitle']) }}</h2>
      {%- endif -%}
    </div>
    <div class="tags">
    {% for category in index['categories'] -%}
      <span class="tag is-white {% if index['number_entries'][category] > index['number_entries_per_category_threshold'] %}is-size-5{% else %}is-size-6{% endif %}">
      <a href="#{{ category.lower() }}" class="has-text-weight-semibold mr-1">{{ macros.render_element(index['category-names'][category]) }}</a> <span class="has-text-grey">({{ index['number_entries'][category] }})</span>
      </span>
    {%- endfor %}
    </div>
  </div>
{% for category in index['categories'] %}
<div class="box">
  <div class="block"><h2 id="{{ category.lower() }}" class="is-size-4 has-text-weight-semibold">{{ macros.render_element(index['category-names'][category]) }}</h2></div>
  <div class="columns">
  {%- for entries_column in index['entries'][category] -%}
    <div class="column">
      <ul>
      {%- for entry in entries_column -%}
        <li>{%- if 'tags' in entry -%}{{ macros.render_element(entry['url']) }}{{ macros.render_element(entry['tags']) }}
        {%- else -%}
        <span class="has-text-weight-semibold">{{ macros.render_element(entry['url']) }}</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 %}