{{ include 'partials/head' }}

<section class="relative overflow-hidden"
         style="background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, white), color-mix(in srgb, var(--color-secondary) 10%, white)); border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 18%, transparent);">
    <div class="aurora-orb" style="width: 280px; height: 280px; right: -80px; top: -80px; background: var(--color-primary);"></div>
    <div class="aurora-orb" style="width: 160px; height: 160px; left: 10%; bottom: -60px; background: var(--color-secondary);"></div>
    <div class="max-w-6xl mx-auto px-4 py-10 relative z-10">
        <div class="mb-2 text-xs uppercase tracking-widest font-medium" style="color: var(--color-primary);">✦ 栏目</div>
        <h1 class="text-3xl md:text-4xl font-bold" style="color: var(--color-ink);">{{ current_column.Name }}</h1>
        {{ if current_column.Description }}
        <p class="mt-3 text-base max-w-2xl" style="color: var(--color-secondary);">{{ current_column.Description }}</p>
        {{ end }}
    </div>
</section>

{{
    cfg_sidebar_on    = column_config.sidebar_enabled != false
    cfg_sidebar_pos   = (column_config.sidebar_position ?? "right")
    cfg_sc            = column_config.sidebar_content
    cfg_show_hot      = !cfg_sc || cfg_sc.hot != false
    cfg_show_latest   = cfg_sc && cfg_sc.latest
    cfg_show_columns  = !cfg_sc || cfg_sc.columns != false
    cfg_hot_title     = (cfg_sc && cfg_sc.hot && cfg_sc.hot.title ? cfg_sc.hot.title : "热门文章")
}}

<main class="flex-1 max-w-6xl mx-auto px-4 py-10 w-full">
    <div class="flex flex-col lg:flex-row gap-8 {{ if cfg_sidebar_on && cfg_sidebar_pos == 'left' }}lg:flex-row-reverse{{ end }}">
        <div class="flex-1 min-w-0">
            {{ if articles.size == 0 }}
            <div class="aurora-card p-14 text-center">
                <div class="text-base" style="color: var(--color-secondary);">该栏目暂无文章</div>
            </div>
            {{ else }}
            <div x-data="loadMoreList({ page: {{ page_number }}, hasMore: {{ if page_number < total_pages }}true{{ else }}false{{ end }}, apiUrl: '{{ site_base_url }}/api/articles', siteBaseUrl: '{{ site_base_url }}', columnId: {{ current_column.Id }}, listSelector: '#column-article-list' })">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="column-article-list">
                    {{ for article in articles }}
                    {{ include 'partials/article_card' }}
                    {{ end }}
                </div>
                <div class="mt-10 text-center" x-show="hasMore" x-cloak>
                    <button type="button" @click="loadMore()" :disabled="loading"
                            class="inline-block px-8 py-2.5 text-sm font-medium transition-all disabled:opacity-60"
                            style="border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent); border-radius: 999px; color: var(--color-primary); background: rgba(255,255,255,0.6);">
                        <span x-show="!loading">加载更多</span>
                        <span x-show="loading" x-cloak>加载中…</span>
                    </button>
                </div>
            </div>
            {{ end }}
        </div>

        {{ if cfg_sidebar_on }}
        <aside class="lg:w-80 flex-shrink-0 space-y-5">
            {{ if cfg_show_hot && hot_articles && hot_articles.size > 0 }}
            <div class="aurora-card p-5">
                <h3 class="font-bold mb-3 flex items-center gap-2" style="color: var(--color-ink);">
                    <span class="w-1 h-4 rounded-full" style="background: linear-gradient(180deg, var(--color-primary), var(--color-accent));"></span>{{ cfg_hot_title }}
                </h3>
                <ul class="space-y-3">
                    {{ for article in hot_articles }}
                    <li class="flex items-start gap-3">
                        <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold flex-shrink-0 mt-0.5"
                              style="{{ if for.index < 3 }}background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: white;{{ else }}background: color-mix(in srgb, var(--color-secondary) 15%, transparent); color: var(--color-secondary);{{ end }}">{{ for.index | math.plus 1 }}</span>
                        <a href="{{ site_base_url }}/a/{{ article.Id }}" class="text-sm line-clamp-2 hover:text-[var(--color-primary)] transition-colors" style="color: var(--color-ink);">{{ article.Title }}</a>
                    </li>
                    {{ end }}
                </ul>
            </div>
            {{ end }}

            {{ if cfg_show_latest && recent_articles && recent_articles.size > 0 }}
            <div class="aurora-card p-5">
                <h3 class="font-bold mb-3" style="color: var(--color-ink);">最新发布</h3>
                <ul class="space-y-3">
                    {{ for article in recent_articles }}
                    <li>
                        <a href="{{ site_base_url }}/a/{{ article.Id }}" class="text-sm line-clamp-2 hover:text-[var(--color-primary)] transition-colors" style="color: var(--color-ink);">{{ article.Title }}</a>
                        <div class="mt-0.5 text-xs" style="color: var(--color-secondary);">{{ if article.PublishedAt }}{{ article.PublishedAt | date.to_string '%Y-%m-%d' }}{{ end }}</div>
                    </li>
                    {{ end }}
                </ul>
            </div>
            {{ end }}

            {{ if cfg_show_columns && columns.size > 0 }}
            <div class="aurora-card p-5">
                <h3 class="font-bold mb-3" style="color: var(--color-ink);">所有栏目</h3>
                <ul class="space-y-1.5">
                    {{ for col in columns }}
                    <li>
                        <a href="{{ site_base_url }}/c/{{ col.Slug }}"
                           class="block px-3 py-1.5 rounded-full text-sm transition-colors"
                           {{ if col.Id == current_column.Id }}style="color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, white); font-weight: 600;"{{ else }}style="color: var(--color-ink);"{{ end }}>
                            {{ col.Name }}
                        </a>
                    </li>
                    {{ end }}
                </ul>
            </div>
            {{ end }}
        </aside>
        {{ end }}
    </div>
</main>

{{ include 'partials/footer' }}