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

{% block content %}

<div class="container-fluid mt-4">

  <!-- ================= HEADER ================= -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      <i class="fas fa-chart-bar"></i>
      Final Student Results – {{ project.name }}
    </h4>

    <a href="{% url 'exams:project_list' %}" class="btn btn-secondary btn-sm">
      <i class="fas fa-arrow-left"></i> Back
    </a>
  </div>

  <!-- ================= SEARCH ================= -->
  <form method="get" class="row g-2 mb-3">
    <div class="col-md-4">
      <input type="text"
             name="q"
             value="{{ search_query }}"
             class="form-control form-control-sm"
             placeholder="Search student number, name or school…">
    </div>

    <div class="col-md-2">
      <button class="btn btn-primary btn-sm w-100">
        <i class="fas fa-search"></i> Search
      </button>
    </div>
  </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>School</th>
            <th>Student No</th>
            <th>Name</th>
            <th>Sex</th>
            <th>Comb</th>
            <th>Avg</th>
            <th>Grade</th>
            <th>Points</th>
            <th>Division</th>
            <th>Full Results</th>
          </tr>
        </thead>

        <tbody>
          {% for r in page_obj %}
          <tr>
            <td>{{ r.student.school.school_code }}</td>
            <td>{{ r.student.student_number }}</td>
            <td>{{ r.student.full_name }}</td>
            <td>{{ r.student.sex }}</td>
            <td>{{ r.student.combination.code }}</td>
            <td class="text-center">{{ r.std_average }}</td>
            <td class="text-center">{{ r.std_averagegrade }}</td>
            <td class="text-center">{{ r.total_points }}</td>
            <td class="text-center fw-bold">{{ r.division }}</td>
            <td style="white-space:nowrap">{{ r.full_results }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="10" class="text-center text-muted">
              No results found
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

    </div>
  </div>

  <!-- ================= PAGINATION ================= -->
  {% if page_obj.paginator.num_pages > 1 %}
  <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>
  {% endif %}

</div>

{% endblock %}