{{include "header.html"}}
{{include "nav.html"}}

<main class="main">
    <div class="container">
        {{if .Content}}
        <article class="article-detail">
            <!-- 文章头部 -->
            <header class="article-header">
                {{if .Content.Tags}}
                <div class="article-tags">
                    {{range .Content.Tags}}
                    <a href="{{.URL}}" class="tag tag-large">{{.Name}}</a>
                    {{end}}
                </div>
                {{end}}
                
                <h1 class="article-title">{{.Content.Title}}</h1>
                
                <div class="article-meta">
                    <span class="meta-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"></circle>
                            <polyline points="12 6 12 12 16 14"></polyline>
                        </svg>
                        {{date "2006-01-02" .Content.CreatedAt}}
                    </span>
                    {{if .Content.Author}}
                    <span class="meta-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                        {{.Content.Author}}
                    </span>
                    {{end}}
                    <span class="meta-item">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                        {{.Content.Views}} 阅读
                    </span>
                </div>
                
                {{if .Content.Img}}
                <div class="article-cover">
                    <img src="{{.Content.Img}}" alt="{{.Content.Title}}">
                </div>
                {{end}}
            </header>
            
            <!-- 文章内容 -->
            <div class="article-content">
                {{.Content.Content|Str2Html}}
            </div>
            
            <!-- 文章底部 -->
            <footer class="article-footer">
                {{if .Content.ColumnName}}
                <div class="article-category">
                    分类：<a href="{{.Content.ColumnURL}}">{{.Content.ColumnName}}</a>
                </div>
                {{end}}
                
                <!-- 上一篇/下一篇导航 -->
                <nav class="article-nav">
                    {{if .Prev}}
                    <a href="{{.Prev.URL}}" class="nav-prev">
                        <span class="nav-label">&larr; 上一篇</span>
                        <span class="nav-title">{{.Prev.Title}}</span>
                    </a>
                    {{end}}
                    
                    {{if .Next}}
                    <a href="{{.Next.URL}}" class="nav-next">
                        <span class="nav-label">下一篇 &rarr;</span>
                        <span class="nav-title">{{.Next.Title}}</span>
                    </a>
                    {{end}}
                </nav>
            </footer>
        </article>
        
        <!-- 相关文章 -->
        {{$related := Related .Content.Id 6}}
        {{if $related}}
        <section class="related-articles">
            <h3 class="section-title">相关文章</h3>
            <div class="masonry-grid masonry-grid-small">
                {{range $related}}
                <article class="masonry-card card-small">
                    {{if .Img}}
                    <a href="{{.URL}}" class="card-image">
                        <img src="{{.Img}}" alt="{{.Title}}" loading="lazy">
                    </a>
                    {{end}}
                    <div class="card-content">
                        <h4 class="card-title-small">
                            <a href="{{.URL}}">{{.Title}}</a>
                        </h4>
                        <span class="card-date">{{date "2006-01-02" .CreatedAt}}</span>
                    </div>
                </article>
                {{end}}
            </div>
        </section>
        {{end}}
        
        {{else}}
        <div class="empty-state">
            <p>文章不存在或已被删除</p>
            <a href="/" class="btn btn-primary">返回首页</a>
        </div>
        {{end}}
    </div>
</main>

{{include "footer.html"}}
{{include "js.html"}}