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

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



   DISTRICT SUBJECT RANKING – {{ subject }} – {{ year }}

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

<a href="{% url 'exams:district_subject_rank_excel' %}?region={{ region.id }}&year={{ year }}&subject={{ subject }}"
   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" id="rankTable">
    <thead class="table-dark">
        <tr>
            <th>No</th>
            <th>District</th>
            <th>Total Candidates</th>
            <th>Average</th>
            <th>% Pass (A–C)</th>
        </tr>
    </thead>
 
    <tbody>
        {% for r in ranking %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ r.district }}</td>
            <td>{{ r.total }}</td>
            <td>{{ r.avg }}</td>
            <td>{{ r.pass_pct }}</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 () {
    $('#summaryTable').DataTable({
        responsive: true,
        pageLength: 50
    });

    $('#rankTable').DataTable({
        responsive: true,
        pageLength: 50
    });
});
</script>


{% endblock %}