{{!< default}}

<main class="min-h-screen bg-white pb-20 relative">
    {{!-- 1. 轮播图 --}}
    {{#get "posts" filter="tag:hash-slider" limit="5" as |slides|}}
    <section id="home-carousel" class="relative w-full aspect-[16/9] md:aspect-[21/9] overflow-hidden group bg-gray-100 js-carousel">
        {{#if slides}}
            <div class="js-carousel-track flex transition-transform duration-500 ease-out h-full w-full">
                {{#foreach slides}}
                    <div class="w-full flex-shrink-0 relative h-full">
                        <a href="{{url}}" class="block w-full h-full relative cursor-pointer select-none">
                            <img src="{{img_url feature_image size="xl"}}" alt="{{title}}" class="absolute inset-0 w-full h-full object-cover pointer-events-none" />
                            <div class="absolute bottom-0 w-full bg-gradient-to-t from-black/70 to-transparent p-4 md:p-8">
                                <h2 class="text-white text-xl md:text-3xl font-bold">{{title}}</h2>
                            </div>
                        </a>
                    </div>
                {{/foreach}}
            </div>
            <div class="js-carousel-dots absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
                {{#foreach slides}}<div class="js-dot w-2 h-2 rounded-full transition-all cursor-pointer bg-white/50" data-index="{{@index}}"></div>{{/foreach}}
            </div>
        {{/if}}
    </section>
    {{/get}}

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-12 max-w-7xl">
        <div class="grid gap-8 lg:grid-cols-12">
            {{!-- ============ 左侧主内容区 ============ --}}
            <div class="lg:col-span-8 xl:col-span-9 space-y-20">
                
                {{!-- 板块一：班级热点 🔥 --}}
                <section id="hot-topics" class="animate-fade-in">
                    <div class="flex justify-center mb-8">
                        <div class="bg-gradient-to-r from-red-500 to-rose-600 text-white px-10 py-3 rounded-full shadow-lg font-bold text-xl">🔥 班级热点</div>
                    </div>
                    
                    <div class="space-y-10">
                        {{!-- 1.1 特别策划 (Red Theme) --}}
                        {{#get "posts" filter="tag:special-event" limit="4" include="tags" order="featured desc, published_at desc"}}
                        <div class="group">
                            <div class="flex items-center justify-between mb-4 border-l-4 border-red-500 pl-4">
                                <h3 class="text-xl font-bold text-gray-800">特别策划</h3>
                                <a href="/tag/special-event/" class="text-sm text-gray-400 hover:text-red-500">更多 &rarr;</a>
                            </div>
                            <div class="grid md:grid-cols-2 gap-4">
                                {{#foreach posts}}
                                <a href="{{url}}" class="p-4 border rounded-xl hover:bg-red-50/30 transition-all {{#if featured}}bg-red-50/50 border-red-100 shadow-sm{{/if}}">
                                    <h4 class="font-bold text-gray-800 {{#if featured}}text-red-600{{/if}}">
                                        {{#if featured}}📌 {{/if}}{{title}}
                                    </h4>
                                    <p class="text-sm text-gray-500 mt-1 line-clamp-1">{{excerpt}}</p>
                                </a>
                                {{/foreach}}
                            </div>
                        </div>
                        {{/get}}

                        {{!-- 1.2 班级活动 (Blue Theme) --}}
                        {{#get "posts" filter="tag:event" limit="4" include="tags"}}
                        <div class="group">
                            <div class="flex items-center justify-between mb-4 border-l-4 border-blue-500 pl-4">
                                <h3 class="text-xl font-bold text-gray-800">班级活动</h3>
                                <a href="/tag/event/" class="text-sm text-gray-400 hover:text-blue-500">更多 &rarr;</a>
                            </div>
                            <div class="grid md:grid-cols-2 gap-4">
                                {{#foreach posts}}
                                <a href="{{url}}" class="p-4 border rounded-xl hover:bg-blue-50/30 transition-all">
                                    <h4 class="font-bold text-gray-800">{{title}}</h4>
                                    <p class="text-sm text-gray-500 mt-1 line-clamp-1">{{excerpt}}</p>
                                </a>
                                {{/foreach}}
                            </div>
                        </div>
                        {{/get}}
                    </div>
                </section>

                {{!-- 板块二：风采展示 🌟 --}}
                <section id="showcase" class="animate-fade-in">
                    <div class="flex justify-center mb-8">
                        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-10 py-3 rounded-full shadow-lg font-bold text-xl">🌟 风采展示</div>
                    </div>

                    <div class="space-y-10">
                        {{!-- 2.1 学生风采 (Green Theme) --}}
                        {{#get "posts" filter="tag:student" limit="4"}}
                        <div class="group">
                            <div class="flex items-center justify-between mb-4 border-l-4 border-emerald-500 pl-4">
                                <h3 class="text-xl font-bold text-gray-800">学生风采</h3>
                                <a href="/tag/student/" class="text-sm text-gray-400 hover:text-emerald-500">更多 &rarr;</a>
                            </div>
                            <div class="grid md:grid-cols-2 gap-4">
                                {{#foreach posts}}
                                <a href="{{url}}" class="p-4 border rounded-xl hover:bg-emerald-50/30 transition-all">
                                    <h4 class="font-bold text-gray-800">{{title}}</h4>
                                    <p class="text-sm text-gray-500 mt-1 line-clamp-1">{{excerpt}}</p>
                                </a>
                                {{/foreach}}
                            </div>
                        </div>
                        {{/get}}

                        {{!-- 2.2 教师风采 (Purple Theme) --}}
                        {{#get "posts" filter="tag:teacher" limit="4"}}
                        <div class="group">
                            <div class="flex items-center justify-between mb-4 border-l-4 border-purple-500 pl-4">
                                <h3 class="text-xl font-bold text-gray-800">教师风采</h3>
                                <a href="/tag/teacher/" class="text-sm text-gray-400 hover:text-purple-500">更多 &rarr;</a>
                            </div>
                            <div class="grid md:grid-cols-2 gap-4">
                                {{#foreach posts}}
                                <a href="{{url}}" class="p-4 border rounded-xl hover:bg-purple-50/30 transition-all">
                                    <h4 class="font-bold text-gray-800">{{title}}</h4>
                                    <p class="text-sm text-gray-500 mt-1 line-clamp-1">{{excerpt}}</p>
                                </a>
                                {{/foreach}}
                            </div>
                        </div>
                        {{/get}}
                    </div>
                </section>

                {{!-- 板块三：档案库 📂 --}}
                <section id="archive-vault" class="animate-fade-in">
                    <div class="flex justify-center mb-10">
                        <div class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-10 py-3 rounded-full shadow-lg font-bold text-xl">📂 档案库</div>
                    </div>

                    {{!-- 3.1 教师档案 --}}
                    <div class="mb-16">
                        <div class="flex items-center justify-between mb-6 border-l-4 border-blue-500 pl-4">
                            <h3 class="text-xl font-bold text-gray-800">👨‍🏫 教师档案</h3>
                            <a href="/tag/teacher-profile/" class="text-sm text-gray-400 hover:text-blue-500">查看全部 &rarr;</a>
                        </div>
                        <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
                            {{#get "posts" filter="tag:teacher-profile" limit="8" include="tags,authors"}}
                                {{#foreach posts}}
                                    {{> "teacher-card"}}
                                {{else}}
                                    <p class="text-gray-400 text-sm col-span-full italic">目前还没有教师档案入库...</p>
                                {{/foreach}}
                            {{/get}}
                        </div>
                    </div>

                    {{!-- 3.2 学生档案 (含权限判断) --}}
                    <div class="mb-12">
                        <div class="flex items-center justify-between mb-6 border-l-4 border-emerald-500 pl-4">
                            <h3 class="text-xl font-bold text-gray-800">🎓 学生档案</h3>
                            {{#if @member}}
                                <a href="/tag/student-profile/" class="text-sm text-gray-400 hover:text-emerald-500">查看全部 &rarr;</a>
                            {{/if}}
                        </div>
                        
                        {{#if @member}}
                            <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
                                {{#get "posts" filter="tag:student-profile" limit="8" include="tags,authors"}}
                                    {{#foreach posts}}
                                        {{> "teacher-card"}}
                                    {{else}}
                                        <p class="text-gray-400 text-sm col-span-full italic">目前还没有学生档案入库...</p>
                                    {{/foreach}}
                                {{/get}}
                            </div>
                        {{else}}
                            {{!-- 未登录占位卡片 --}}
                            <div class="bg-gray-50 rounded-2xl p-12 text-center border-2 border-dashed border-gray-200">
                                <div class="text-5xl mb-4">🔐</div>
                                <h4 class="text-gray-800 font-bold mb-2">学生档案仅限内部成员访问</h4>
                                <p class="text-gray-500 mb-6 text-sm">为了保护隐私，请先登录你的班级账号</p>
                                <a href="#/portal/signin" data-portal="signin" class="inline-block bg-emerald-600 text-white px-8 py-2.5 rounded-full font-bold hover:bg-emerald-700 transition-all transform hover:scale-105 shadow-md">
                                    立即登录
                                </a>
                            </div>
                        {{/if}}
                    </div>
                </section>
            </div>

            {{!-- ============ 右侧边栏 ============ --}}
            <aside class="hidden lg:block lg:col-span-4 xl:col-span-3">
                <div class="sticky top-20 space-y-6" id="sidebar-widgets">
                    {{!-- 欢迎卡片容器 --}}
                    <div id="welcome-card" class="bg-gradient-to-br from-blue-50 via-white to-purple-50 rounded-xl p-6 border border-slate-200/60 shadow-sm animate-fade-in">
                        <div id="welcome-ip-location-info" class="text-sm leading-relaxed text-slate-700">
                            <div class="flex items-center justify-center py-2">
                                <div class="w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce"></div>
                                <div class="ml-2 text-xs text-slate-400">正在定位...</div>
                            </div>
                        </div>
                    </div>
                    
                    {{#get "posts" filter="tag:hash-timer" limit="3"}}
                        {{#foreach posts}}
                            <div class="js-event-timer rounded-xl p-6 border {{#if featured}}bg-gradient-to-br from-red-600 to-red-700 text-white shadow-lg{{else}}bg-white text-gray-800 shadow-sm{{/if}}" data-target="{{excerpt}}">
                                <div class="flex justify-between items-center mb-4">
                                    <h4 class="text-lg font-bold">{{title}}</h4>
                                    <span class="js-timer-label text-[10px] px-2 py-1 rounded-md {{#if featured}}bg-white/20 text-white{{else}}bg-blue-50 text-blue-600{{/if}} font-medium">
                                        计算中...
                                    </span>
                                </div>
                                
                                <div class="grid grid-cols-4 gap-2 text-center text-[10px]">
                                    <div class="p-2 {{#if featured}}bg-white/20{{else}}bg-gray-50{{/if}} rounded-lg"><span class="js-days block text-xl font-bold">00</span>DAYS</div>
                                    <div class="p-2 {{#if featured}}bg-white/20{{else}}bg-gray-50{{/if}} rounded-lg"><span class="js-hours block text-xl font-bold">00</span>HRS</div>
                                    <div class="p-2 {{#if featured}}bg-white/20{{else}}bg-gray-50{{/if}} rounded-lg"><span class="js-minutes block text-xl font-bold">00</span>MIN</div>
                                    <div class="p-2 {{#if featured}}bg-white/20{{else}}bg-gray-50{{/if}} rounded-lg"><span class="js-seconds block text-xl font-bold">00</span>SEC</div>
                                </div>
                            </div>
                        {{/foreach}}
                    {{/get}}
                </div>
            </aside>
        </div>
    </div>
    <script src="https://cdn.jsdmirror.com/gh/bishshi/welcomemessage@1.6/txmap.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</main>