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

<div class="container mt-4">

  <h4 class="mb-3">
    <i class="fas fa-trophy"></i>
    School Ranking – {{ project.name }}
  </h4>

  <!-- SEARCH -->
  <form method="get" class="d-flex mb-3" style="max-width:400px;">
    <input type="text"
           name="q"
           value="{{ search_query }}"
           class="form-control form-control-sm"
           placeholder="Search school code or name">
    <button class="btn btn-sm btn-primary ms-2">
      <i class="fas fa-search"></i>
    </button>
  </form>

  <!-- TABLE -->
  <div class="card shadow-sm">
    <div class="card-body table-responsive p-0">

      <table class="table table-sm table-bordered mb-0">
        <thead class="table-dark">
          <tr>
            <th width="60">Rank</th>
            <th>School Code</th>
            <th>School Name</th>
            <th width="80">Students</th>
            <th width="90">AVG</th>
            <th width="80">AVG Grd</th>
            <th width="90">GPA</th>
            <th width="80">GPA Grd</th>
            <th>Status</th>
          </tr>
        </thead>

        <tbody>
          {% for r in ranked_rows %}
          <tr>
            <td class="text-center fw-bold">{{ r.rank }}</td>
            <td>{{ r.obj.school.school_code }}</td>
            <td>{{ r.obj.school.name }}</td>
            <td class="text-center">{{ r.obj.with_results }}</td>
            <td class="text-center">{{ r.obj.sch_avg }}</td>
            <td class="text-center">{{ r.obj.sch_avg_grd }}</td>
            <td class="text-center">{{ r.obj.sch_gpa }}</td>
            <td class="text-center">{{ r.obj.sch_gpa_grade }}</td>
            <td class="text-center">{{ r.obj.sch_gpa_status }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="9" class="text-center text-muted">
              No ranking data found
            </td>
          </tr>
          {% endfor %}
        </tbody>

      </table>
    </div>
  </div>

  <!-- PAGINATION -->
  <nav class="mt-3">
    <ul class="pagination pagination-sm">

      {% if page_obj.has_previous %}
        <li class="page-item">
          <a class="page-link"
             href="?q={{ search_query }}&page={{ page_obj.previous_page_number }}">
            Previous
          </a>
        </li>
      {% endif %}

      <li class="page-item active">
        <span class="page-link">
          Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
        </span>
      </li>

      {% if page_obj.has_next %}
        <li class="page-item">
          <a class="page-link"
             href="?q={{ search_query }}&page={{ page_obj.next_page_number }}">
            Next
          </a>
        </li>
      {% endif %}

    </ul>
  </nav>

</div>

{% endblock %}