{% 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 %}