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

<main class="main">
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            {{if .Type}}
            {{if eq .Type "category"}}
            {{if .CurrentColumn}}<h1 class="page-title">{{.CurrentColumn.Name}}</h1>{{end}}
            {{if .Single}}<p class="page-desc">{{.Single.Description}}</p>{{end}}
            {{else if eq .Type "search"}}
            <h1 class="page-title">搜索结果</h1>
            {{if .Request}}<p class="page-desc">关键词: {{.Request.Query.key}}</p>{{end}}
            {{else if eq .Type "tag"}}
            <h1 class="page-title">标签聚合</h1>
            {{end}}
            {{end}}
        </div>

        <!-- 面包屑导航 -->
        {{if .Nav}}
        {{if gt (len .Nav) 0}}
        <nav class="breadcrumb">
            <a href="/">首页</a>
            {{range .Nav}}
            <span class="sep">/</span>
            {{if .Slug}}<a href="/{{.Slug}}">{{.Name}}</a>{{else}}<span>{{.Name}}</span>{{end}}
            {{end}}
        </nav>
        {{end}}
        {{end}}

        <!-- 瀑布流网格 -->
        {{if .List}}
        <div class="masonry-grid">
            {{range .List}}
            {{$hasImg := and .Img (ne .Img "")}}
            {{$cardClass := "masonry-card"}}
            {{if $hasImg}}{{$cardClass = "masonry-card card-medium"}}{{end}}
            
            <article class="{{$cardClass}}">
                {{if $hasImg}}
                <a href="{{.URL}}" class="card-image">
                    <img src="{{.Img}}" alt="{{.Title}}" loading="lazy">
                </a>
                {{end}}
                
                <div class="card-content">
                    {{if and .ColumnName (not $hasImg)}}
                    <span class="card-category">{{.ColumnName}}</span>
                    {{end}}
                    
                    <h2 class="card-title">
                        <a href="{{.URL}}">{{.Title}}</a>
                    </h2>
                    
                    {{if .Description}}
                    <p class="card-desc">{{.Description}}</p>
                    {{end}}
                    
                    <div class="card-meta">
                        <span class="card-date">{{date "2006-01-02" .CreatedAt}}</span>
                        <span class="card-views">{{.Views}} 阅读</span>
                    </div>
                    
                    {{if .Tags}}
                    <div class="card-tags">
                        {{range .Tags}}
                        <a href="{{.URL}}" class="tag">{{.Name}}</a>
                        {{end}}
                    </div>
                    {{end}}
                </div>
            </article>
            {{end}}
        </div>
        
        <!-- 分页 -->
        {{if .Pager}}
        {{if .Pager.Enabled}}
        <nav class="pagination">
            {{if .Pager.HasPrev}}
            <a href="{{.Pager.PrevURL}}" class="page-link">&larr; 上一页</a>
            {{else}}
            <span class="page-link disabled">&larr; 上一页</span>
            {{end}}
            
            <span class="page-info">{{.Pager.Current}} / {{.Pager.TotalPages}}</span>
            
            {{if .Pager.HasNext}}
            <a href="{{.Pager.NextURL}}" class="page-link">下一页 &rarr;</a>
            {{else}}
            <span class="page-link disabled">下一页 &rarr;</span>
            {{end}}
        </nav>
        {{end}}
        {{end}}
        
        {{else}}
        <div class="empty-state">
            <p>暂无相关内容</p>
            {{if eq .Type "search"}}
            <a href="/" class="btn btn-primary">返回首页</a>
            {{end}}
        </div>
        {{end}}
    </div>
</main>

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