{% extends "base.html" %}
{% block title %}{{ ('Categories') }} - {{ SITENAME }}{% endblock %}

{% block breadcrumbs %}
    {% if DISPLAY_BREADCRUMBS %}
    <ol class="breadcrumb">
        <li><a href="{{ SITEURL }}" title="{{ SITENAME }}"><i class="fa fa-home fa-lg"></i></a></li>
        <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 %}