{{template "layout/header.html" .}}
<body>

{{template "layout/nav.html" .}}

<div class="studio-wrapper">
    {{template "studio/sidebar.html" .}}

    <main class="studio-main">
        <div class="studio-header">
            <h1>数据分析</h1>
            <span class="studio-subtitle">了解你的创作表现</span>
        </div>

        {{if .Error}}
        <div class="studio-error">{{.Error}}</div>
        {{else}}
        <div class="stat-cards">
            <div class="stat-card">
                <div class="stat-card-icon">📝</div>
                <div class="stat-card-body">
                    <span class="stat-card-value">{{.Overview.TotalPosts}}</span>
                    <span class="stat-card-label">文章总数</span>
                </div>
            </div>
            <div class="stat-card stat-card-approved">
                <div class="stat-card-icon">✅</div>
                <div class="stat-card-body">
                    <span class="stat-card-value">{{.Overview.ApprovedCount}}</span>
                    <span class="stat-card-label">已发布</span>
                </div>
            </div>
            <div class="stat-card stat-card-draft">
                <div class="stat-card-icon">📄</div>
                <div class="stat-card-body">
                    <span class="stat-card-value">{{.Overview.DraftCount}}</span>
                    <span class="stat-card-label">草稿</span>
                </div>
            </div>
        </div>

        <div class="studio-section">
            <h2 class="section-title">状态分布</h2>
            <div class="status-bar">
                {{if gt .Overview.ApprovedCount 0}}
                <div class="status-bar-segment status-bar-approved" style="flex:{{.Overview.ApprovedCount}}">已发布 {{.Overview.ApprovedCount}}</div>
                {{end}}
                {{if gt .Overview.DraftCount 0}}
                <div class="status-bar-segment status-bar-draft" style="flex:{{.Overview.DraftCount}}">草稿 {{.Overview.DraftCount}}</div>
                {{end}}
                {{if gt .Overview.PendingCount 0}}
                <div class="status-bar-segment status-bar-pending" style="flex:{{.Overview.PendingCount}}">审核中 {{.Overview.PendingCount}}</div>
                {{end}}
                {{if gt .Overview.RejectedCount 0}}
                <div class="status-bar-segment status-bar-rejected" style="flex:{{.Overview.RejectedCount}}">已退回 {{.Overview.RejectedCount}}</div>
                {{end}}
            </div>
        </div>

        <div class="studio-section">
            <div class="studio-placeholder">
                <p>📈 更详细的阅读趋势、互动数据将在后续版本中推出</p>
            </div>
        </div>
        {{end}}
    </main>
</div>

{{template "layout/footer.html" .}}

</body>
</html>
