{% extends 'base.html' %}

{% block title %}
All Categories · {{ super() }}
{% endblock title %}

{% block head_description %}
All categories of the {{ SITENAME|striptags|e }} blog. 
{% endblock head_description %}

{% block meta_tags_in_head %}
{{ super() }}
<meta property="og:title" content="All Categories · {{ SITENAME|striptags|e }}"/>
<meta name="twitter:title" content="All Categories · {{ SITENAME|striptags|e }}">
<meta property="og:url" content="{{ SITEURL }}/categories.html" />
<meta property="og:description" content="All categories of the {{ SITENAME|striptags|e }} blog" />
<meta name="twitter:description" content="All categories of the {{ SITENAME|striptags|e }} blog">
<meta property="og:site_name" content="{{ SITENAME|striptags|e }}" />
<meta property="og:article:author" content="{{ AUTHOR }}" />
{% from '_includes/_defaults.html' import FEATURED_IMAGE with context %}
{% if FEATURED_IMAGE %}
<meta property="og:image" content="{{FEATURED_IMAGE}}" />
<meta name="twitter:image" content="{{FEATURED_IMAGE}}" >
{% endif %}
{% endblock meta_tags_in_head %}

{% block feed_links %}
{{ super() }}
{% include '_includes/feeds_categories.html' %}
{% endblock feed_links %}

{% block content %}
<div class="row">
    <header class="page-header col-md-10 col-md-offset-2">
    <h1><a href="{{ SITEURL }}/categories.html">All Categories</a></h1>
    </header>
</div>


<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel-group" id="accordion role="tablist" aria-multiselectable="true"">
            {% for category, articles in categories %}
            {# ~ is used for concatenation. I have added an empty string "" because without it Jinja
            does not convert second operand into string #}
            {% set collapse_id = category.slug ~ '-ref' ~ "" %}
            {% set collapse_ref = '#' ~ collapse_id  ~ "" %}
            {% set heading_id = "heading-" ~ category.slug ~ "" %}
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="{{ heading_id }}" data-toggle="collapse" data-parent="#accordion" aria-expanded="false" aria-controls="{{ collapse_id }}" data-target="{{ collapse_ref }}">
                    <a class="list-of-categories collapsed" href="{{ collapse_ref }}">
                        {% set num = articles|count %}
                        {{ category }}<span>{{ num }}</span>
                    </a>
                </div>
                <div id="{{ collapse_id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{{ heading_id }}">
                    <div class="panel-body">
                        <ul class="list-articles-category">
                            {% for article in articles %}
                            <li><time pubdate="pubdate" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }} {%if article.subtitle %} <small> {{ article.subtitle }} </small> {% endif %} </a></li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock content %}
{% block script %}
{{ super() }}
<script language="javascript" type="text/javascript">
    function uncollapse() {
            $(window.location.hash).collapse({
                toggle: true
            })
    }
</script>

<script type="text/javascript" language="JavaScript">
    uncollapse(); 
</script>
{% endblock script %}