{% extends "base.html" %}
{% block head %}
<title>{{ settings.SITENAME }}</title>
{% endblock %}
{% block content %}
    <div class="index archive">
    {% for item in items %}
        {% ifchanged item.week %}
        {% comment %}
        <h2 class="week">{{ item.year }} week {{ item.week }}</h2>
        {% endcomment %}
        {% endifchanged %}
        {% include "listitem.html" with item=item %}
    {% endfor %}
    {% if archive %}
    <div class="archive">
        <a href="{{ archive }}">previous weeks</a>
    </div>
    {% endif %}
    </div>
    {% if weeks %}
    <div class="weeks">
        <div>
        {% for week in weeks %}
            {% ifchanged week.year %}
                </div>
                <h1>{{ week.year }}</h1>
                <div class="year-details-{{ week.year }}" {% if week.year != this_year %} style="display: none"{% endif %}>
            {% endifchanged %}
            {% if week.date == this_week %}
            <b>{{ week.title }}</b><br>
            {% else %}
            <a href="/_{{ week.date }}/">{{ week.title }}</a><br>
            {% endif %}
        {% endfor %}
        </div>
        <script>
            document.querySelectorAll('.weeks h1').forEach(h1 => {
                h1.addEventListener('click', event => {
                    var year = event.target.innerText
                    var details = document.querySelector('.year-details-' + year)
                    details.style.display = details.style.display == 'none' ? '' : 'none'
                })
            })
        </script>
    </div>
    {% endif %}
{% endblock %}