{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3">Proctoring Review Dashboard</h1>
      <p class="text-muted mb-0">Review suspicious exam activity, camera flags and browser events for completed attempts.</p>
    </div>
    <a class="btn btn-outline-secondary" href="{% url 'cbt:admin_attempts_list' %}">Back to Attempts</a>
  </div>

  <div class="card shadow-sm">
    <div class="card-body">
      <table id="proctor-table" class="table table-hover table-bordered align-middle">
        <thead>
          <tr>
            <th>Attempt</th>
            <th>User</th>
            <th>Assessment</th>
            <th>Warnings</th>
            <th>Suspicious Score</th>
            <th>Events</th>
            <th>Camera Flags</th>
            <th>Started</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for attempt in attempts %}
          <tr>
            <td>{{ attempt.pk }}</td>
            <td>{{ attempt.user }}</td>
            <td>{{ attempt.assessment.title }}</td>
            <td>{{ attempt.proctor_warnings }}</td>
            <td>{{ attempt.suspicious_score|floatformat:1 }}</td>
            <td>{{ attempt.event_count }}</td>
            <td>{{ attempt.camera_event_count }}</td>
            <td>{{ attempt.started_at }}</td>
            <td>
              <a class="btn btn-sm btn-outline-primary" href="#" hx-get="{% url 'cbt:admin_proctor_report_detail' attempt.pk %}" hx-target="#modal-body" hx-swap="innerHTML">Review</a>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="9" class="text-center text-muted">No proctor events to review yet.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="htmxModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div id="modal-body"></div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_body %}
{{ block.super }}
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function(){ $('#proctor-table').DataTable({ order:[[4, 'desc'], [5, 'desc']] }); });
</script>
<script src="https://unpkg.com/htmx.org@1.10.0"></script>
<script>
  document.body.addEventListener('htmx:afterSwap', function(evt){
    if(evt.detail.target && evt.detail.target.id === 'modal-body'){
      var modalEl = document.getElementById('htmxModal');
      var modal = new bootstrap.Modal(modalEl);
      modal.show();
    }
  });
</script>
{% endblock %}