{% extends "index.html" %}

{% block title %}
    Categories – {{ SITENAME }}
{% endblock title %}

{% block header %}
    <div class="container">
        <div class="row">
            <div class="col-8">
                <h3 id="Categories in {{ SITENAME }}" style="color: orange;">Categories in {{ SITENAME }}</h3>
            </div>
            <div class="col-4 small" style="margin-top: 0.5rem;">
                {% if ADD_THIS_ID and (page_name or page or article) %}
                    <div class="text-right mb-2 small" style="height: 26px">
                        <div class="addthis_inline_share_toolbox"></div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock header %}

{% block add_this %}
{# remove ADD_THIS in content, move to above header #}
{% endblock add_this %}

{% block content %}
    <!--
	<div class="text-center">
		{% for category, articles in categories|sort %}
			<a class="btn btn-success btn-sm" href="{{ SITEURL }}/{{ category.url }}">
			  {{ category|lower }}  <span class="badge badge-warning" style="font-size: small;">{{ articles|count }}</span>
			</a>
		{% endfor %}
	</div>
    -->

    <!-- Accordion -->
    <div id="accordionList" class="accordion shadow">
        {% for category, articles in categories|sort %}
            <!-- Accordion items -->
            <div class="card">
                <div id="heading_{{ category|lower }}" class="card-header bg-white shadow-sm border-0">
                    <h2 class="mb-0">
                        <button type="button" data-toggle="collapse" data-target="#collapse{{ category|lower }}" aria-expanded="false" aria-controls="collapse{{ category|lower }}" class="btn btn-link text-dark font-weight-bold collapsible-link collapsed">
                            {{ category|lower }}  <span class="badge badge-warning" style="font-size: small;">{{ articles|count }}</span>
                        </button>
                    </h2>
                </div>
                <!-- Item list -->
                <div id="collapse{{ category|lower }}" aria-labelledby="heading_{{ category|lower }}" data-parent="#accordionList" class="collapse" style="background-color: whitesmoke">
                    {% for article in articles %}
                    <div class="card-body border-bottom">
                        <a  class="m-0" href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a><br>
                        <span class="small">by <a href="{{ SITEURL }}/{{ article.author.url }}" style="color: darkblue;">{{ article.author }}</a>, post on <span class="text-success">{{ article.locale_date }}</span></span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>
    
    <!-- Google Adsense -->
    {% if GOOGLE_ADSENSE and GOOGLE_ADSENSE.ads.page %}
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- ad-home -->
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="{{ GOOGLE_ADSENSE.id }}"
             data-ad-slot="{{ GOOGLE_ADSENSE.ads.page }}"
             data-ad-format="auto"
             data-full-width-responsive="true"></ins>
        <script>
             (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    {% endif %}
{% endblock content %}