{% extends "exams/base.html" %}
{% block content %}

<div class="container mt-4">
<h3 class="fw-bold text-primary mb-3">

DISTRICT SUBJECT RANKING –
{{ subject_code }} – {{ subject_name_sw }} – {{ year }}

<a href="{% url 'exams:regional_subject_school_ranking_pdf' %}?region={{ region.id }}&year={{ year }}&subject={{ subject_code }}" class="btn btn-danger btn-sm">
Export PDF
</a>

<a href="{% url 'exams:regional_subject_school_ranking_excel' %}?region={{ region.id }}&year={{ year }}&subject={{ subject_code }}" class="btn btn-success btn-sm">
Export Excel
</a>




<a href="{% url 'exams:regionwise' %}" class="btn btn-primary">
<i class="fas fa-long-arrow-alt-left"></i> BACK
</a>

</h3>
        <div class="card">
        <div class="card-header">
        <div class="card-body">

<table class="table table-bordered table-striped table-sm mt-3" id="rankTable">
    <thead class="table-dark">
        <tr>
            <th>Rank</th>
            <th>Code</th>
            <th>School</th>
            <th>District</th>
            <th>Total</th>
            <th>Pass A–C</th>
            <th>% Pass</th>
            <th>Average</th>
        </tr>
    </thead>

    <tbody>
        {% for r in rows %}
        <tr>
            <td>{{ r.rank }}</td>
            <td>{{ r.school_code }}</td>
            <td>{{ r.school }}</td>
            <td>{{ r.district }}</td>
            <td>{{ r.total }}</td>
            <td>{{ r.pass_ac }}</td>
            <td>{{ r.pass_pct }}</td>
            <td>{{ r.avg }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
</div>
</div>
</div>


<!-- jQuery (required by DataTables) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
$(document).ready(function() {

    let table = $('#rankTable').DataTable({
        "pageLength": 50,
        "lengthMenu": [10, 20, 50, 100],
        "ordering": true,
        "autoWidth": false,
        "responsive": true
    });
});
</script>
{% endblock %}