{{ include 'partials/head' }}

{{~ # ============ 栏目头 ============ ~}}
<section style="border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);">
    <div class="max-w-4xl mx-auto px-6 py-10">
        <h1 class="font-bold" style="font-size: 36px; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-ink);">{{ current_column.Name }}</h1>
        {{ if current_column.Description }}
        <p class="mt-3 ed-lede text-base" style="line-height: 1.7;">{{ 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-6 py-10 w-full">
    <div class="flex flex-col lg:flex-row gap-16 {{ if cfg_sidebar_on && cfg_sidebar_pos == "left" }}lg:flex-row-reverse{{ end }}">

        <!-- 主内容区：文章列表（文字流） -->
        <div class="flex-1 min-w-0 lg:max-w-2xl lg:mx-auto">
            {{ if articles.size == 0 }}
            <div class="py-12 text-center">
                <p class="ed-lede text-base">该栏目暂无文章</p>
            </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 id="column-article-list">
                        {{ for article in articles }}
                        <article class="ed-row">
                            {{ if article.ColumnName }}
                            <div class="ed-cat mb-1">{{ article.ColumnName }}</div>
                            {{ end }}
                            <a href="{{ site_base_url }}/a/{{ article.Id }}">
                                <h4 class="font-bold hover:underline decoration-1 underline-offset-4" style="font-size: 24px; line-height: 1.25; color: var(--color-ink);">{{ article.Title }}</h4>
                            </a>
                            {{ if article.Description }}
                            <a href="{{ site_base_url }}/a/{{ article.Id }}" class="block mt-2 ed-lede text-sm no-underline" style="line-height: 1.75;">{{ article.Description }}</a>
                            {{ end }}
                            <div class="mt-2 text-xs ed-lede flex items-center gap-2">
                                {{ if article.Author }}
                                <span>撰文 / {{ article.Author }}</span>
                                <span class="ed-ornament text-xs">·</span>
                                {{ end }}
                                <time>{{ if article.PublishedAt }}{{ article.PublishedAt | date.to_string '%Y-%m-%d' }}{{ else }}{{ article.CreatedAt | date.to_string '%Y-%m-%d' }}{{ end }}</time>
                            </div>
                        </article>
                        {{ end }}
                    </div>

                    <div class="mt-10 text-center" x-show="hasMore" x-cloak>
                        <button type="button"
                                @click="loadMore()"
                                :disabled="loading"
                                class="inline-block px-6 py-2 italic text-sm border transition-colors disabled:opacity-60 disabled:cursor-wait"
                                style="border-color: color-mix(in srgb, var(--color-ink) 25%, transparent); color: var(--color-ink); border-radius: var(--radius-base);">
                            <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-72 flex-shrink-0">
            <div class="sticky top-8 space-y-10">

                {{~ # ---------- 热门文章 ---------- ~}}
                {{ if cfg_show_hot && hot_articles && hot_articles.size > 0 }}
                <div>
                    <div class="flex items-center gap-3 mb-6">
                        <div class="ed-cat whitespace-nowrap">{{ cfg_hot_title }}</div>
                        <div class="ed-rule flex-1"></div>
                    </div>
                    <ol class="space-y-5">
                        {{ for article in hot_articles }}
                        <li class="flex gap-4">
                            <span class="ed-serif-num">{{ if for.index < 9 }}0{{ for.index | math.plus 1 }}{{ else }}{{ for.index | math.plus 1 }}{{ end }}</span>
                            <div class="flex-1 min-w-0">
                                <a href="{{ site_base_url }}/a/{{ article.Id }}" class="hover:underline decoration-1 underline-offset-2 font-bold" style="line-height: 1.35; color: var(--color-ink); font-size: 15px;">{{ article.Title }}</a>
                                {{ if article.Author }}
                                <div class="mt-1 text-xs ed-lede">{{ article.Author }}</div>
                                {{ end }}
                            </div>
                        </li>
                        {{ end }}
                    </ol>
                </div>
                {{ end }}

                {{~ # ---------- 最新文章 ---------- ~}}
                {{ if cfg_show_latest && recent_articles && recent_articles.size > 0 }}
                <div>
                    <div class="flex items-center gap-3 mb-6">
                        <div class="ed-cat whitespace-nowrap">最新</div>
                        <div class="ed-rule flex-1"></div>
                    </div>
                    <ul class="space-y-4">
                        {{ for article in recent_articles }}
                        <li>
                            <a href="{{ site_base_url }}/a/{{ article.Id }}" class="hover:underline decoration-1 underline-offset-2 font-bold text-sm" style="line-height: 1.4; color: var(--color-ink);">{{ article.Title }}</a>
                            <div class="mt-0.5 text-xs ed-lede">{{ 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>
                    <div class="flex items-center gap-3 mb-6">
                        <div class="ed-cat whitespace-nowrap">栏目</div>
                        <div class="ed-rule flex-1"></div>
                    </div>
                    <ul class="space-y-2">
                        {{ for col in columns }}
                        <li>
                            <a href="{{ site_base_url }}/c/{{ col.Slug }}"
                               class="block py-1 text-sm transition-colors {{ if col.Id == current_column.Id }}font-bold{{ end }}"
                               style="{{ if col.Id == current_column.Id }}color: var(--color-primary);{{ else }}color: var(--color-ink);{{ end }}">
                                {{ col.Name }}
                            </a>
                        </li>
                        {{ end }}
                    </ul>
                </div>
                {{ end }}

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

{{ include 'partials/footer' }}