{% extends "base.html" %}

{# NOTE: Assumes no pagination #}
{% set CANONICAL_URL = SITEURL + '/' + CATEGORIES_URL %}

{% block title -%}
    Categories — {{ super() }}
{%- endblock %}

{% block breadcrumbs %}
    {% if DISPLAY_BREADCRUMBS %}
    <ol class="breadcrumb">
        <li><a href="{{ SITE_ROOT_URL | default('/') }}" title="{{ SITENAME }}"><span class="fa fa-home fa-lg"></span></a></li>
      {% if MENUITEMS_2_AT %}
        <li><a href="{{ SITEURL -}} / {{- MENUITEMS_2_AT_LINK }}" title="{{ MENUITEMS_2_AT }}">{{ MENUITEMS_2_AT }}</a></li>
      {% endif %}
        <li class="active">Categories</li>
    </ol>
    {% endif %}
{% endblock %}

{% block content %}
    <section id="categories">
        <h1>All Categories for {{ SITENAME }}</h1>
        <div class="panel-group" id="accordion">
            {% for category, articles in categories %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse-{{category.slug}}">
                            {{ category }} <span class="badge pull-right">{{ articles|count }}</span>
                        </a>
                    </h4>
                </div>
                <div id="collapse-{{category.slug}}" class="panel-collapse collapse">
                    <div class="panel-body">
                        {% for article in articles %}
                        <p>
                            <span class="categories-timestamp">
                                <time datetime="{{ article.date.isoformat() }}">
                                    {{ article.locale_date }}
                                </time>
                            </span>
                            <a href="{{ SITEURL -}} / {{- article.url }}">{{ article.title }}</a>
                        </p>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

    </section>
{% endblock %}