{{ include 'partials/head' }}

{{~ # ============ 栏目头 ============ ~}}
<section class="bg-white border-b border-gray-100">
    <div class="max-w-6xl mx-auto px-4 py-8">
        <h1 class="text-2xl md:text-3xl font-bold" style="color: var(--color-ink);">{{ current_column.Name }}</h1>
        {{ if current_column.Description }}
        <p class="mt-2 text-base" style="color: var(--color-secondary);">{{ current_column.Description }}</p>
        {{ end }}
    </div>
</section>

{{~ # 解析 column_config，缺省走安全默认值（右侧栏 + 热门/所有栏目开） ~}}
{{
    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-8 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="bg-white rounded-lg shadow-sm p-12 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-8 text-center" x-show="hasMore" x-cloak>
                        <button type="button"
                                @click="loadMore()"
                                :disabled="loading"
                                class="inline-block px-6 py-2 border border-gray-300 rounded-lg text-sm transition-colors hover:text-[var(--color-primary)] hover:border-[var(--color-primary)] disabled:opacity-60 disabled:cursor-wait"
                                style="color: var(--color-secondary);">
                            <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-6">

            {{~ # ---------- 热门文章 ---------- ~}}
            {{~ # 与首页 home.html 一致：Top1-3 红/橙/黄实心徽章，4+ 淡灰底 ~}}
            {{ if cfg_show_hot && hot_articles && hot_articles.size > 0 }}
            <div class="bg-white rounded-lg shadow-sm p-5">
                <h3 class="font-bold mb-3" style="color: var(--color-ink);">{{ cfg_hot_title }}</h3>
                <ul class="space-y-3">
                    {{ for article in hot_articles }}
                    <li class="flex items-start gap-2">
                        <span class="inline-flex items-center justify-center w-5 h-5 rounded text-xs font-bold flex-shrink-0 mt-0.5 {{ if for.index < 3 }}text-white{{ else }}text-gray-500 bg-gray-100{{ end }}"
                              style="{{ if for.index == 0 }}background:#ef4444{{ else if for.index == 1 }}background:#f97316{{ else if for.index == 2 }}background:#eab308{{ 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="bg-white rounded-lg shadow-sm 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 transition-colors hover:text-[var(--color-primary)]" 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="bg-white rounded-lg shadow-sm 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-2 py-1.5 rounded text-sm transition-colors {{ if col.Id == current_column.Id }}font-semibold{{ else }}hover:bg-gray-50{{ end }}"
                           {{ if col.Id == current_column.Id }}style="color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, white);"{{ else }}style="color: var(--color-ink);"{{ end }}>
                            {{ col.Name }}
                        </a>
                    </li>
                    {{ end }}
                </ul>
            </div>
            {{ end }}

        </aside>
        {{ end }}
    </div>
</main>

{{ include 'partials/footer' }}