{% extends "base.html" %}

{% block title %}{{ page.title | default(value="Archive") }} | {{ site.config.title }}{% endblock %}

{% block content %}
{% set has_sidebar = site.config.extra.author_profile | default(value=false) %}
<div class="{% if has_sidebar %}bamboo-sidebar-grid{% else %}max-w-4xl mx-auto{% endif %}">
    {% if has_sidebar %}
    <aside class="bamboo-sidebar">
        {% include "partials/author_profile.html" %}
    </aside>
    {% endif %}
    <div class="bamboo-main-column">
        <header class="mb-10 pb-6 border-b border-gray-200 dark:border-gray-700">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white">{{ page.title | default(value="Archive") }}</h1>
            {% if page.content %}
            <div class="mt-4 text-gray-600 dark:text-gray-300 leading-relaxed">{{ page.content | safe }}</div>
            {% endif %}
        </header>

        {% if site.posts | length == 0 %}
        <p class="text-gray-500 dark:text-gray-400">No posts yet.</p>
        {% else %}
        {% set_global current_year = "" %}
        {% for post in site.posts %}
            {% set post_year = post.date | date(format="%Y") %}
            {% if post_year != current_year %}
                {% if not loop.first %}</ul></section>{% endif %}
                <section class="mb-12">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">{{ post_year }}</h2>
                <ul class="space-y-4">
                {% set_global current_year = post_year %}
            {% endif %}
            <li class="flex items-baseline gap-4">
                <time class="text-sm font-mono text-gray-500 dark:text-gray-400 tabular-nums shrink-0" datetime="{{ post.date }}">{{ post.date | date(format="%b %d") }}</time>
                <a href="{{ site.config.base_url }}/posts/{{ post.slug }}/" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 font-medium transition-colors">{{ post.title }}</a>
            </li>
            {% if loop.last %}</ul></section>{% endif %}
        {% endfor %}
        {% endif %}
    </div>
</div>
{% endblock %}