{{ include 'partials/head' }}

{{~ # ============ 解析 column_config sidebar_content 三模块 ============ ~}}
{{
    cfg_sidebar       = column_config.sidebar_content
    cfg_hot_mod       = cfg_sidebar ? cfg_sidebar.hot : null
    cfg_show_hot      = !cfg_hot_mod || cfg_hot_mod.enabled != false
    cfg_hot_title     = (cfg_hot_mod && cfg_hot_mod.title ? cfg_hot_mod.title : "热门文章")

    cfg_latest_mod    = cfg_sidebar ? cfg_sidebar.latest : null
    cfg_show_latest   = cfg_latest_mod && cfg_latest_mod.enabled
    cfg_latest_title  = (cfg_latest_mod && cfg_latest_mod.title ? cfg_latest_mod.title : "最新文章")

    cfg_cols_mod      = cfg_sidebar ? cfg_sidebar.columns : null
    cfg_show_columns  = !cfg_cols_mod || cfg_cols_mod.enabled != false
    cfg_cols_title    = (cfg_cols_mod && cfg_cols_mod.title ? cfg_cols_mod.title : "所有栏目")
}}

<main class="flex-1">

    {{~ # ============ 栏目 Hero ============ ~}}
    <section class="nx-hero-soft border-b border-[var(--color-border-soft)]">
        <div class="nx-container py-8 md:py-10">
            <nav class="flex items-center gap-2 text-sm mb-5" style="color: var(--color-muted);">
                <a href="{{ site_base_url }}/" class="hover:text-[var(--color-ink)] transition-colors">首页</a>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
                <span style="color: var(--color-ink);">{{ current_column.Name }}</span>
            </nav>
            <h1 class="text-[36px] md:text-[42px] font-bold tracking-tight" style="color: var(--color-ink);">{{ current_column.Name }}</h1>
            {{ if current_column.Description }}
            <p class="mt-3 text-[16px] leading-relaxed max-w-2xl" style="color: var(--color-muted);">{{ current_column.Description }}</p>
            {{ end }}
        </div>
    </section>

    {{~ # ============ 列表 + 侧栏 ============ ~}}
    <section class="py-12 md:py-14">
        <div class="nx-container grid grid-cols-1 lg:grid-cols-12 gap-10">

            <!-- 主内容区 -->
            <div class="lg:col-span-8">
                {{ if articles.size == 0 }}
                <div class="rounded-xl border border-dashed border-[var(--color-border)] p-12 text-center" style="background: var(--color-surface-alt);">
                    <p class="text-base font-medium" style="color: var(--color-ink);">该栏目暂无文章</p>
                    <p class="mt-1 text-sm" style="color: var(--color-muted);">新文章发布后将自动出现在这里。</p>
                </div>
                {{ else }}
                <div x-data="nxLoadMoreList({ 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 }}
                        {{ card_variant = 'grid' }}
                        {{ include 'partials/article_card' }}
                        {{ end }}
                    </div>

                    <div class="mt-10 flex justify-center" x-show="hasMore" x-cloak>
                        <button type="button" class="nx-btn-outline" @click="loadMore()" :disabled="loading" style="padding: .7rem 1.6rem;">
                            <span x-show="!loading">加载更多</span>
                            <span x-show="loading" x-cloak>加载中…</span>
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                        </button>
                    </div>
                </div>
                {{ end }}
            </div>

            <!-- 侧栏 -->
            <aside class="lg:col-span-4 space-y-6">

                <!-- 热门文章（榜单编号 + 栏目·日期副行） -->
                {{ if cfg_show_hot && hot_articles && hot_articles.size > 0 }}
                <div class="nx-card p-6">
                    <div class="text-[15px] font-semibold mb-4 flex items-center gap-2" style="color: var(--color-ink);">
                        <span class="inline-block w-1 h-4 rounded-full nx-brand-gradient"></span>
                        {{ cfg_hot_title }}
                    </div>
                    <ol class="space-y-1">
                        {{ for article in hot_articles }}
                        <li>
                            <a href="{{ site_base_url }}/a/{{ article.Id }}" class="group flex gap-3 -mx-2 px-2 py-2 rounded-lg transition-colors">
                                <span class="text-[22px] leading-none font-bold flex-shrink-0 w-6 {{ if for.index < 2 }}nx-brand-text{{ else }}text-[var(--color-muted-2)]{{ end }}" style="font-family: var(--font-mono, monospace);">{{ if (for.index | math.plus 1) < 10 }}0{{ end }}{{ for.index | math.plus 1 }}</span>
                                <div class="min-w-0">
                                    <div class="font-medium text-[15px] leading-snug line-clamp-2 text-[var(--color-ink)] group-hover:!text-[var(--color-primary)] transition-colors">{{ article.Title }}</div>
                                    <div class="mt-1 text-xs" style="color: var(--color-muted);">
                                        {{ if article.ColumnName }}{{ article.ColumnName }} · {{ end }}{{ if article.PublishedAt }}{{ article.PublishedAt | date.to_string '%Y-%m-%d' }}{{ else if article.CreatedAt }}{{ article.CreatedAt | date.to_string '%Y-%m-%d' }}{{ end }}
                                    </div>
                                </div>
                            </a>
                        </li>
                        {{ end }}
                    </ol>
                </div>
                {{ end }}

                <!-- 最新文章 -->
                {{ if cfg_show_latest && recent_articles && recent_articles.size > 0 }}
                <div class="nx-card p-6">
                    <div class="text-[15px] font-semibold mb-4 flex items-center gap-2" style="color: var(--color-ink);">
                        <span class="inline-block w-1 h-4 rounded-full nx-brand-gradient"></span>
                        {{ cfg_latest_title }}
                    </div>
                    <ul class="space-y-1">
                        {{ for article in recent_articles }}
                        <li>
                            <a href="{{ site_base_url }}/a/{{ article.Id }}" class="group flex flex-col gap-1 -mx-2 px-2 py-2 rounded-lg transition-colors">
                                <span class="font-medium text-[15px] leading-snug line-clamp-2 text-[var(--color-ink)] group-hover:!text-[var(--color-primary)] transition-colors">{{ article.Title }}</span>
                                <span class="text-xs" style="color: var(--color-muted);">
                                    {{ if article.ColumnName }}{{ article.ColumnName }} · {{ end }}{{ if article.PublishedAt }}{{ article.PublishedAt | date.to_string '%Y-%m-%d' }}{{ else if article.CreatedAt }}{{ article.CreatedAt | date.to_string '%Y-%m-%d' }}{{ end }}
                                </span>
                            </a>
                        </li>
                        {{ end }}
                    </ul>
                </div>
                {{ end }}

                <!-- 全部栏目（垂直列表，当前栏目品牌渐变实心高亮） -->
                {{ if cfg_show_columns && columns.size > 1 }}
                <div class="nx-card p-6">
                    <div class="text-[15px] font-semibold mb-5 flex items-center gap-2" style="color: var(--color-ink);">
                        <span class="inline-block w-1 h-4 rounded-full nx-brand-gradient"></span>
                        {{ cfg_cols_title }}
                    </div>
                    <ul class="space-y-1.5">
                        {{ for col in columns }}
                        <li>
                            {{ if col.Id == current_column.Id }}
                            <a href="{{ site_base_url }}/c/{{ col.Slug }}"
                               class="block px-3 py-2 rounded-lg text-sm font-semibold nx-brand-gradient transition-opacity hover:opacity-90"
                               style="color: #fff;">
                                {{ col.Name }}
                            </a>
                            {{ else }}
                            <a href="{{ site_base_url }}/c/{{ col.Slug }}"
                               class="block px-3 py-2 rounded-lg text-sm transition-colors hover:bg-[var(--color-surface-alt)]"
                               style="color: var(--color-ink);">
                                {{ col.Name }}
                            </a>
                            {{ end }}
                        </li>
                        {{ end }}
                    </ul>
                </div>
                {{ end }}

            </aside>
        </div>
    </section>

</main>

{{ include 'partials/footer' }}