{% extends "base.html" %}
{% block title %}
    Archives
{% endblock title %}
{% block top_center %}
    <h1>
        <a href="{{ SITEURL }}/{{ ARCHIVES_SAVE_AS }}"
           rel="bookmark"
           title="Permalink to archives">Archives</a>
    </h1>
{% endblock top_center %}
{% block content %}
    {# Compute the spanning years all articles covers #}
    {% set year_range = [] %}
    {% for year in range(dates[-1].date.year, dates[0].date.year + 1) %}
        {# Gather all articles from current year #}
        {% set yearly_articles = [] %}
        {% for article in dates %}
            {% if article.date.year == year %}
                {% if yearly_articles.append(article) %}{% endif %}
            {% endif %}
        {% endfor %}
        {# Ignore empty years #}
        {% if yearly_articles|length > 0 %}
            {% if year_range.append({'year': year, 'articles': yearly_articles}) %}{% endif %}
        {% endif %}
    {% endfor %}
    <div class="accordion"
         id="accordionArchives"
         role="tablist"
         aria-multiselectable="true">
        {% for yearly_group in year_range|sort(reverse = True, attribute = 'year') %}
            <div class="card">
                <h4 class="card-header" role="tab" id="heading{{ yearly_group.year }}">
                    <button type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#collapse{{ yearly_group.year }}"
                            class="btn btn-link text-start {% if not loop.first %}collapsed{% endif %}"
                            aria-expanded="{% if loop.first %}true{% else %}false{% endif %}"
                            aria-controls="collapse{{ yearly_group.year }}">
                        {{ yearly_group.year }}
                        <span class="badge text-bg-secondary float-end align-middle">{{ yearly_group.articles|length }}</span>
                        <span class="visually-hidden">articles</span>
                    </button>
                </h4>
                <div id="collapse{{ yearly_group.year }}"
                     class="collapse {% if loop.first %}show{% endif %}"
                     role="tabpanel"
                     aria-labelledby="heading{{ yearly_group.year }}"
                     data-bs-parent="#accordionArchives">
                    <div class="card-body">
                        {# Carried in a namespace because a plain {% set %} does not outlive the
                           iteration that made it: the month would reset on every article, and
                           each one would open a list of its own. #}
                        {% set month = namespace(current=False) %}
                        {# The <dl> opens inside one {% if %} and closes in two others, so djlint
                           cannot pair it up and drifts every tag that follows it. #}
                        {# djlint:off #}
                        {% for article in yearly_group.articles %}
                            {% if article.date.month != month.current %}
                                {% set month.current = article.date.month %}
                                {% if not loop.first %}</dl>{% endif %}
                                <dl class="row">
                            {% endif %}
                            <dt class="col-sm-2">{{ m.render_published_date(article.date, article.date.strftime("%b. %d")) }}</dt>
                            <dd class="col-sm-10">
                                <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
                            </dd>
                            {% if loop.last %}</dl>{% endif %}
                        {% endfor %}
                        {# djlint:on #}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock content %}