{% extends 'base_dashboard.html' %}

{% block title %}Practical review queue{% endblock %}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
  <div>
    <h4 class="fw-bold mb-0">Practical review queue</h4>
    <p class="text-muted small mb-0">Approve practicals before certificates are issued for technical tracks.</p>
  </div>
  <span class="badge text-bg-warning">{{ pending_count }} pending</span>
</div>

<div class="btn-group mb-3" role="group">
  <a href="?status=pending" class="btn btn-sm {% if status_filter == 'pending' %}btn-primary{% else %}btn-outline-primary{% endif %}">Pending</a>
  <a href="?status=needs_revision" class="btn btn-sm {% if status_filter == 'needs_revision' %}btn-primary{% else %}btn-outline-primary{% endif %}">Needs revision</a>
  <a href="?status=approved" class="btn btn-sm {% if status_filter == 'approved' %}btn-primary{% else %}btn-outline-primary{% endif %}">Approved</a>
  <a href="?status=rejected" class="btn btn-sm {% if status_filter == 'rejected' %}btn-primary{% else %}btn-outline-primary{% endif %}">Rejected</a>
  <a href="?status=all" class="btn btn-sm {% if status_filter == 'all' %}btn-primary{% else %}btn-outline-primary{% endif %}">All</a>
</div>

<div class="card border-0 shadow-sm rounded-4">
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th>Candidate</th>
          <th>Course</th>
          <th>Type</th>
          <th>Submitted</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for s in submissions %}
        <tr>
          <td>
            <div class="fw-semibold">{{ s.user.get_display_name }}</div>
            <div class="small text-muted">{{ s.user.email }}</div>
          </td>
          <td>{{ s.course.title }}</td>
          <td class="small">{{ s.get_submission_type_display }}</td>
          <td class="small">{{ s.submitted_at|date:"d M Y H:i" }}</td>
          <td>
            <span class="badge
              {% if s.status == 'pending' %}text-bg-warning
              {% elif s.status == 'approved' %}text-bg-success
              {% elif s.status == 'needs_revision' %}text-bg-info
              {% else %}text-bg-danger{% endif %}">
              {{ s.get_status_display }}
            </span>
          </td>
          <td class="text-end">
            <a href="{% url 'courses:practical_review_detail' pk=s.pk %}" class="btn btn-sm btn-outline-primary">Review</a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="6" class="text-center text-muted py-4">No submissions in this filter.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% if page_obj.has_other_pages %}
<nav class="mt-3">
  <ul class="pagination justify-content-center">
    {% if page_obj.has_previous %}
    <li class="page-item"><a class="page-link" href="?status={{ status_filter }}&page={{ page_obj.previous_page_number }}">Prev</a></li>
    {% endif %}
    <li class="page-item disabled"><span class="page-link">Page {{ page_obj.number }}</span></li>
    {% if page_obj.has_next %}
    <li class="page-item"><a class="page-link" href="?status={{ status_filter }}&page={{ page_obj.next_page_number }}">Next</a></li>
    {% endif %}
  </ul>
</nav>
{% endif %}
{% endblock %}