<div class="row g-3 mb-4">
    <!-- Card 1: Completion -->
    <div class="col-md-4 col-sm-6">
        <div class="card bg-dark text-light border-secondary h-100 shadow-sm">
            <div class="card-body">
                <div class="text-uppercase text-muted small fw-semibold mb-1">Completion Rate</div>
                <div class="fs-3 fw-bold text-success">{{ completion_rate }}%</div>
                <div class="small text-muted mt-1">{{ user_answer_count_total }} of {{ expected_answer_count }} answers</div>
            </div>
        </div>
    </div>
    <!-- Card 2: Pass Rate -->
    <div class="col-md-4 col-sm-6">
        <div class="card bg-dark text-light border-secondary h-100 shadow-sm">
            <div class="card-body">
                <div class="text-uppercase text-muted small fw-semibold mb-1">Pass Rate (&ge; {{ pass_mark_threshold }})</div>
                <div class="fs-3 fw-bold text-info">{{ pass_rate }}%</div>
                <div class="small text-muted mt-1">{{ passed_candidates_count }} of {{ cids|length }} candidates</div>
            </div>
        </div>
    </div>
    <!-- Card 3: Class Average -->
    <div class="col-md-4 col-sm-6">
        <div class="card bg-dark text-light border-secondary h-100 shadow-sm">
            <div class="card-body">
                <div class="text-uppercase text-muted small fw-semibold mb-1">Class Average (Mean)</div>
                <div class="fs-3 fw-bold text-warning">{{ mean }} <span class="fs-6 text-muted">/ {{ max_score }}</span></div>
                <div class="small text-muted mt-1">Median: {{ median }} | Mode: {{ mode }}</div>
            </div>
        </div>
    </div>
    <!-- Card 4: Range -->
    <div class="col-md-4 col-sm-6">
        <div class="card bg-dark text-light border-secondary h-100 shadow-sm">
            <div class="card-body">
                <div class="text-uppercase text-muted small fw-semibold mb-1">Score Range</div>
                <div class="fs-3 fw-bold text-primary">{{ min_score }} - {{ max_score_achieved }}</div>
                <div class="small text-muted mt-1">Lowest vs Highest score achieved</div>
            </div>
        </div>
    </div>
    <!-- Card 5: Dispersion & IQR -->
    <div class="col-md-4 col-sm-6">
        <div class="card bg-dark text-light border-secondary h-100 shadow-sm">
            <div class="card-body">
                <div class="text-uppercase text-muted small fw-semibold mb-1">Dispersion &amp; IQR</div>
                <div class="fs-3 fw-semibold text-light">&sigma; = {{ std_dev }}</div>
                <div class="small text-muted mt-1">Q1: {{ q1 }} | Q3: {{ q3 }}</div>
            </div>
        </div>
    </div>
    <!-- Card 6: Candidates & Questions -->
    <div class="col-md-4 col-sm-6">
        <div class="card bg-dark text-light border-secondary h-100 shadow-sm">
            <div class="card-body">
                <div class="text-uppercase text-muted small fw-semibold mb-1">Candidates &amp; Questions</div>
                <div class="fs-3 fw-bold text-light">{{ cids|length }} <span class="fs-6 text-muted">candidates</span></div>
                <div class="small text-muted mt-1">{{ question_number }} questions ({{ unmarked_count }} unmarked answers)</div>
            </div>
        </div>
    </div>
</div>

{% if plot %}
    <div class="card bg-dark text-light border-secondary mb-4 shadow-sm">
        <div class="card-header border-secondary">
            <h6 class="mb-0">Distribution of Scores</h6>
        </div>
        <div class="card-body p-0">
            <div id="stats-plot-wrapper">
                {{ plot|safe }}
            </div>
        </div>
    </div>
{% endif %}
