@model HomeContainerModel
@{
    var startTimeStr = WebToolsExtensions.StartTime.ToString("yyyy/MM/dd HH:mm:ss");
}

<div class="home-view">
    <!-- Hero Section -->
    <section class="hero" id="hero-slider">
        @if (Model.Pictures.Count > 0)
        {
            @foreach (var pic in Model.Pictures)
            {
                 <div class="hero__bg" data-bg="@pic.AccessUrl" data-desc="@(string.IsNullOrEmpty(pic.Description) ? "自由 · 开放 · 合作 · 共享" : pic.Description)"></div>
            }
        }
        else
        {
             <div class="hero__bg active" style="background-color: #333;"></div>
        }
        
        <div class="hero__overlay"></div>
        <div class="container hero__content">
            <h1 class="hero__title" id="hero-title">自由 · 开放 · 合作 · 共享</h1>
            <p class="hero__subtitle" id="hero-subtitle">保持热爱，奔赴山海</p>
            <div class="hero__actions">
                <a href="#latest-articles" class="btn btn--primary">开始阅读</a>
            </div>
        </div>
    </section>

    <!-- Main Content Area -->
    <div class="container page-layout">
        <!-- Articles Feed -->
        <div class="page-content" id="latest-articles">
            <!-- Featured Video Section -->
            <div class="home-video-section js-home-video-section">
                <div class="home-video-section__header">
                    <h3 class="home-video-section__title">
                        <i class="fa fa-play-circle"></i> 精选视频
                    </h3>
                </div>
                <div class="home-video-section__body">
                    <div class="home-video-player js-home-video-container">
                        <!-- Player will be injected here -->
                    </div>
                </div>
            </div>

            <div class="section-header">
                <h2 class="section-title">最新文章</h2>
                <a asp-controller="Article" asp-action="Index" class="section-more" data-pjax>查看更多 <i class="fa fa-arrow-right"></i></a>
            </div>
            
            <div class="article-grid">
                <partial name="_ArticleItemsPartial" model="@Model.Blogs"/>
            </div>
        </div>

        <!-- Sidebar -->
        <aside class="page-sidebar">
            <!-- Profile Card -->
            <div class="widget card">
                <div class="card__body text-center">
                    <img src="@Program.AssetsHost/images/Lara-Croft.png" alt="Avatar" class="avatar avatar--lg mb-1">
                    <h3 class="widget__title">叫我阿胖</h3>
                    <p class="text-muted">彭迁</p>
                    <div class="social-links mt-1">
                        <a href="https://github.com/pengqian089" target="_blank" title="Github">
                            <i class="fa-brands fa-github"></i>
                        </a>
                        <a href="mailto:pengqian089@hotmail.com" title="邮箱">
                            <i class="fa-solid fa-envelope"></i>
                        </a>
                        <a href="https://wpa.qq.com/msgrd?v=3&uin=350952323&site=qq&menu=yes" title="QQ" target="_blank">
                            <i class="fa-brands fa-qq"></i>
                        </a>
                        <a asp-action="Index" asp-controller="Resume" target="_blank" title="查看简历">
                            <i class="fa fa-file-text"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Video Widget -->
            <!-- Moved to main content area -->

            
            <!-- Introduction -->
            <div class="widget card">
                <div class="card__header">
                    <h4 class="card__title">
                        <i class="fa-solid fa-address-card"></i>
                        关于我
                    </h4>
                </div>
                <div class="card__body widget__intro">
                    <p>彭氏胖纸者，名迁，江陵人，诞于夏。少聪慧，敏于学。</p>
                    <p>古人有言，曰：趋于地，就于时。迁者诞于炎炎之夏，故活泼而好动。</p>
                    <p>江陵者襟江带河，集日月精华，文人骚客多出于此，迁虽芸芸之其一，实粹粹然也。</p>
                    <p>迁之性，稳而健，平而滑。若得于古，不可为刺客而说客也夫刺客，静若处子，动若蛇蝎。偏安于角落，偶然爆发。而说客者，平滑婉转，若流水，或缓或急，然不可断绝也。</p>
                    <p>迁者，柔弱如水，暴怒如江。遏飞舟击巉石曲回肠终归海。</p>
                </div>
            </div>
            
            <!-- Today News (Async Loaded) -->
            <div data-request="@Url.Action("TodayNews", "Home")">
                 <div class="widget card">
                    <div class="card__body text-center" style="padding: 2rem;">
                         <i class="fa fa-spinner fa-spin fa-2x text-muted"></i>
                    </div>
                 </div>
            </div>

            <!-- Tags Cloud -->
            @if (Model.Tags.Count > 0)
            {
                <partial name="_TagCloudPartial" model="@Model.Tags" />
            }
            
            <!-- Announcement -->
             <div class="widget card">
                <div class="card__body">
                    <p id="runTime" data-start-time="@startTimeStr">Running...</p>
                </div>
            </div>
        </aside>
    </div>
</div>