{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/user-pages.css"}}">


<div class="user-stats-page">
    <div class="card mb-3">
        <div class="card-body">
            <div class="user-page-head">
                <div class="user-page-head-main">
                    <h5>{{T "user_page_stats"}}</h5>
                    <p class="text-muted">{{T "user_stats_subtitle"}}</p>
                </div>
                <div class="user-page-head-actions">
                    <a href="/user" class="btn btn-outline-secondary btn-sm"><i class='bx bx-grid-alt'></i> {{T "user_dashboard"}}</a>
                    <a href="/user/documents" class="btn btn-outline-secondary btn-sm"><i class='bx bx-file'></i> {{T "user_documents_manage"}}</a>
                </div>
            </div>
        </div>
    </div>

    <div class="user-stats-summary row g-3 g-md-4 mb-4">
        <div class="col-6 col-md-3"><div class="stat-card"><h3>{{.Data.DocumentCount}}</h3><p>{{T "user_stat_documents"}}</p></div></div>
        <div class="col-6 col-md-3"><div class="stat-card"><h3>{{.Data.PublishedCount}}</h3><p>{{T "user_stat_published"}}</p></div></div>
        <div class="col-6 col-md-3"><div class="stat-card"><h3>{{.Data.ViewCount}}</h3><p>{{T "user_stat_views"}}</p></div></div>
        <div class="col-6 col-md-3"><div class="stat-card"><h3>{{.Data.LikeCount}}</h3><p>{{T "user_stat_likes"}}</p></div></div>
    </div>

    <div class="user-dash-chart-card mb-4">
        <div class="card-head">
            <div>
                <h5 class="mb-1"><i class='bx bx-line-chart'></i> {{T "user_stats_trend_title"}}</h5>
                <p class="small text-muted mb-0">{{T "user_stats_trend_desc"}}</p>
            </div>
            <select class="form-select form-select-sm" id="userStatsPeriod" style="width:auto;min-width:120px;">
                <option value="7days">{{T "user_stats_period_7d"}}</option>
                <option value="30days">{{T "user_stats_period_30d"}}</option>
            </select>
        </div>
        <div class="card-body-inner">
            <div class="row g-3 mb-4">
                <div class="col-6 col-md-4 col-xl-2"><div class="user-dash-period-stat"><h4 id="psPublished">0</h4><p>{{T "user_stats_period_published"}}</p></div></div>
                <div class="col-6 col-md-4 col-xl-2"><div class="user-dash-period-stat"><h4 id="psViews">0</h4><p>{{T "user_stats_period_views"}}</p></div></div>
                <div class="col-6 col-md-4 col-xl-2"><div class="user-dash-period-stat"><h4 id="psLikes">0</h4><p>{{T "user_stats_period_likes"}}</p></div></div>
                <div class="col-6 col-md-4 col-xl-2"><div class="user-dash-period-stat"><h4 id="psFavorites">0</h4><p>{{T "user_stats_period_favorites"}}</p></div></div>
                <div class="col-6 col-md-4 col-xl-2"><div class="user-dash-period-stat"><h4 id="psComments">0</h4><p>{{T "user_stats_period_comments"}}</p></div></div>
                <div class="col-6 col-md-4 col-xl-2"><div class="user-dash-period-stat"><h4 id="psCreated">0</h4><p>{{T "user_stats_period_created"}}</p></div></div>
            </div>
            <canvas id="userEngagementChart" height="90"></canvas>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-lg-8">
            <div class="user-dash-chart-card h-100">
                <div class="card-head"><h5 class="mb-0"><i class='bx bx-edit-alt'></i> {{T "user_stats_publish_title"}}</h5></div>
                <div class="card-body-inner"><canvas id="userPublishChart" height="90"></canvas></div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="user-dash-chart-card h-100">
                <div class="card-head"><h5 class="mb-0"><i class='bx bx-pie-chart-alt-2'></i> {{T "user_stats_status_title"}}</h5></div>
                <div class="card-body-inner d-flex align-items-center justify-content-center">
                    <canvas id="userStatusChart" height="180"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="user-dash-chart-card mb-4">
        <div class="card-head"><h5 class="mb-0"><i class='bx bx-trophy'></i> {{T "user_stats_top_docs"}}</h5></div>
        <div class="card-body-inner">
            <ul class="nav nav-tabs user-dash-tabs mb-3" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="userTopViewsTab" data-bs-toggle="tab" data-bs-target="#userTopViewsPane" type="button" role="tab">
                        <i class='bx bx-show'></i> {{T "user_stats_top_views"}}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="userTopLikesTab" data-bs-toggle="tab" data-bs-target="#userTopLikesPane" type="button" role="tab">
                        <i class='bx bx-like'></i> {{T "user_stats_top_likes"}}
                    </button>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade show active" id="userTopViewsPane" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover user-dash-rank-table mb-0">
                            <thead><tr><th style="width:56px;">#</th><th>{{T "user_col_title"}}</th><th class="text-end" style="width:100px;">{{T "user_stats_col_views"}}</th></tr></thead>
                            <tbody id="userTopViewsList"><tr><td colspan="3" class="text-center text-muted py-3">{{T "user_loading"}}</td></tr></tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="userTopLikesPane" role="tabpanel">
                    <div class="table-responsive">
                        <table class="table table-hover user-dash-rank-table mb-0">
                            <thead><tr><th style="width:56px;">#</th><th>{{T "user_col_title"}}</th><th class="text-end" style="width:100px;">{{T "user_stats_col_likes"}}</th></tr></thead>
                            <tbody id="userTopLikesList"><tr><td colspan="3" class="text-center text-muted py-3">{{T "user_loading"}}</td></tr></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
window.UserDashI18n = {
    loadFailed: {{json (T "user_stats_load_failed")}},
    noData: {{json (T "user_stats_no_data")}},
    published: {{json (T "user_stats_series_published")}},
    created: {{json (T "user_stats_series_created")}},
    views: {{json (T "user_stats_series_views")}},
    likes: {{json (T "user_stats_series_likes")}},
    favorites: {{json (T "user_stats_series_favorites")}},
    comments: {{json (T "user_stats_series_comments")}},
    statusPublished: {{json (T "user_stat_published")}},
    statusDraft: {{json (T "user_stats_status_draft")}},
    statusPending: {{json (T "user_stat_pending")}},
    statusRejected: {{json (T "user_stats_status_rejected")}}
};
</script>
<script src="{{asset "/template/default/assets/chartjs/js/Chart.min.js"}}"></script>
<script src="{{asset "/template/default/assets/js/user-stats-charts.js"}}"></script>
<script>
$(function () {
    UserStatsCharts.init({ period: '7days', periodSelect: '#userStatsPeriod' });
});
</script>
{{end}}