{{ define "main" }}
<div class="archives">
    <h1 class="page-title">文章归档</h1>
    
    {{ $posts := where .Site.RegularPages "Type" "posts" }}
    {{ $sortedPosts := sort $posts "Date" "desc" }}
    {{ $grouped := $sortedPosts.GroupByDate "2006" }}
    
    {{ if $grouped }}
    <div class="archives-list">
        {{ range $grouped }}
        <div class="archive-year">
            <h2 class="year-header">
                {{ .Key }}
                <span class="year-count">{{ len .Pages }}</span>
            </h2>
            <div class="year-posts">
                {{ $monthGroups := .Pages.GroupByDate "January" }}
                {{ range $monthGroups }}
                <div class="month-section">
                    <h3 class="month-header">{{ .Key }}</h3>
                    <div class="month-posts">
                        {{ range .Pages }}
                        <article class="archive-post">
                            <time datetime="{{ .Date.Format "2006-01-02" }}" class="post-date">
                                {{ .Date.Format "01-02" }}
                            </time>
                            <a href="{{ .RelPermalink }}" class="post-title">{{ .Title }}</a>
                            {{ with .Params.categories }}
                            <div class="post-categories">
                                {{ range . }}
                                <span class="category">{{ . }}</span>
                                {{ end }}
                            </div>
                            {{ end }}
                        </article>
                        {{ end }}
                    </div>
                </div>
                {{ end }}
            </div>
        </div>
        {{ end }}
    </div>
    {{ else }}
    <div class="empty-state">
        <div class="empty-state-icon">📂</div>
        <p>暂无文章</p>
    </div>
    {{ end }}
</div>

<style>
.archives-list {
    margin-top: 2rem;
}

.archive-year {
    margin-bottom: 3rem;
}

.year-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.month-section {
    margin-bottom: 2rem;
}

.month-header {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 4px solid var(--primary-color);
}

.month-posts {
    padding-left: 2rem;
}

.archive-post {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.archive-post:hover {
    transform: translateX(4px);
    border-color: var(--primary-color);
}

.post-date {
    color: var(--secondary-color);
    font-size: 0.9rem;
    min-width: 60px;
}

.post-title {
    flex: 1;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
}

.post-title:hover {
    color: var(--primary-color);
}

.post-categories {
    display: flex;
    gap: 0.5rem;
}

.category {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--bg-color);
    border-radius: 4px;
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .archive-post {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .post-date {
        min-width: auto;
    }
    
    .month-posts {
        padding-left: 1rem;
    }
}
</style>
{{ end }}