{# templates/admin/blocks/dashboard_mini_leaderboard.html.twig #}
<style>
    .mini-card-block {
        background: #fff;
        border-radius: 12px;
        padding: 16px;
        border: 1px solid #eff2f5;
        margin-bottom: 16px;
    }
    .metric-pill-mini {
        background: #f5f8fa;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        color: #5e6278;
    }
</style>

<div class="row mt-4">
    <div class="col-md-12">
        <div class="mb-4">
            <h2 class="fw-bolder text-gray-400 m-0 fs-5">
                <i class="fa fa-chart-line text-primary me-2"></i> Repository Performance Overview</h2>
        </div>
    </div>
</div>
<div class="row w-100 m-0 pt-3 px-2">
    <div class="col-xl-6 col-md-6 col-sm-12 col-12">
        <div class="card p-4 shadow-sm" style="border-radius:12px;">
            <h3 class="fw-bold text-gray-700 mb-3 fs-6">Most Viewed Papers</h3>
            {% for paper in top_papers %}
                <div class="mini-card-block d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge badge-light-primary fw-bolder text-uppercase mb-1 fs-9">{{ paper.course.courseCode }}</span>
                        <div class="text-gray-800 fw-bold small text-truncate" style="max-width:200px;">{{ paper.course.title }}</div>
                    </div>
                    <span class="metric-pill-mini text-primary bg-light-primary"><i class="fa fa-eye"></i> {{ paper.viewCount }}</span>
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="col-xl-6 col-md-6 col-sm-12 col-12">
        <div class="card p-4 shadow-sm" style="border-radius:12px;">
            <h3 class="fw-bold text-gray-700 mb-3 fs-6">Faculty Penetration Density</h3>
            {% for item in faculty_metrics|slice(0, 3) %}
                {% set max_views = total_views > 0 ? total_views : 1 %}
                {% set percent = (item.viewCount|default(0) / max_views) * 100 %}
                <div class="mini-card-block">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="text-gray-800 fw-bold small">{{ item.facultyName }}</span>
                        <span class="badge badge-light-success fs-9 fw-bolder">{{ item.paperCount }} papers</span>
                    </div>
                    <div class="progress h-6px w-100 bg-light rounded">
                        <div class="progress-bar bg-success" style="width: {{ percent }}%"></div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>