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

<div class="container mt-4">


<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0">
    {{ paper.subject.subject_name_eng }} - {{ paper.paper_code }}
  </h4>

    <form method="get" class="d-flex">
      <input type="text"
             name="q"
             value="{{ search_query }}"
             class="form-control form-control-sm me-2"
             placeholder="Search school...">
      <button class="btn btn-sm btn-primary">
        <i class="fas fa-search"></i>
      </button>
    </form>

  <a href="{% url 'exams:project_marks_subjects' project.id %}"
     class="btn btn-outline-secondary btn-sm">
     <i class="fas fa-arrow-left"></i> Change Subject
  </a>


  </div>
</div>

  <table class="table table-bordered table-striped">
    <thead class="table-success">
      <tr>
        <th>Centre</th>
        <th>School</th>
        <th>Total Scripts</th>
        <th>Entered</th>
        <th>Progress</th>
        <th width="200">Action</th>
      </tr>
    </thead>

    <tbody>
      {% for s in page_obj %}
      <tr>
        <td>{{ s.school_code }}</td>
        <td>{{ s.name }}</td>

        <td>
          <span class="badge bg-secondary">
            {{ s.total_scripts }}
          </span>
        </td>

        <td>
          <span class="badge bg-success">
            {{ s.entered_marks }}
          </span>
        </td>

        <td style="width:200px">
          <div class="progress" style="height:20px;">
            <div class="progress-bar
                {% if s.progress_percent < 50 %}bg-danger
                {% elif s.progress_percent < 80 %}bg-warning
                {% else %}bg-success{% endif %}"
                 style="width: {{ s.progress_percent|floatformat:0 }}%">
              {{ s.progress_percent|floatformat:0 }}%
            </div>
          </div>
        </td>

        <td>
          <a href="{% url 'exams:marks_capture_page' project.id paper.id s.id %}"
             class="btn btn-sm btn-primary">
             Capture
          </a>

          <a href="{% url 'exams:project_school_subject_print' project.id paper.id s.id %}"
             class="btn btn-danger btn-sm"
             target="_blank">
             <i class="fas fa-file-pdf"></i> Print PDF
          </a>

        </td>

      </tr>
      {% empty %}
      <tr>
        <td colspan="5" class="text-center text-muted">
          No schools found
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <!-- Pagination -->
<!-- Professional Pagination -->
<div class="d-flex justify-content-between align-items-center mt-4">

  <!-- Page Info -->
  <div class="text-muted">
    Page <strong>{{ page_obj.number }}</strong>
    of <strong>{{ page_obj.paginator.num_pages }}</strong>
  </div>

  <!-- Buttons -->
  <div class="btn-group">

    <!-- Previous -->
    {% if page_obj.has_previous %}
      <a href="?page={{ page_obj.previous_page_number }}&q={{ search_query }}"
         class="btn btn-outline-primary btn-sm">
         <i class="fas fa-arrow-left"></i> Previous
      </a>
    {% else %}
      <button class="btn btn-outline-secondary btn-sm" disabled>
        <i class="fas fa-arrow-left"></i> Previous
      </button>
    {% endif %}

    <!-- Next -->
    {% if page_obj.has_next %}
      <a href="?page={{ page_obj.next_page_number }}&q={{ search_query }}"
         class="btn btn-primary btn-sm">
         Next <i class="fas fa-arrow-right"></i>
      </a>
    {% else %}
      <button class="btn btn-secondary btn-sm" disabled>
        Next <i class="fas fa-arrow-right"></i>
      </button>
    {% endif %}

  </div>

</div>



</div>

{% endblock %}