{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
  <div class="col-lg-10 mx-auto">
    <div class="card shadow-sm">
      <div class="card-body">
        <h2 class="h4">Proctor Report for Attempt #{{ attempt.pk }}</h2>
        <p class="text-muted mb-4">User: {{ attempt.user }} · Assessment: {{ attempt.assessment.title }}</p>

        <div class="row g-3 mb-4">
          <div class="col-md-6">
            <div class="card bg-light border-0">
              <div class="card-body">
                <p class="mb-1 text-muted">Warnings</p>
                <h3 class="h5">{{ attempt.proctor_warnings }}</h3>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card bg-light border-0">
              <div class="card-body">
                <p class="mb-1 text-muted">Suspicious Score</p>
                <h3 class="h5">{{ attempt.suspicious_score|floatformat:1 }}</h3>
              </div>
            </div>
          </div>
        </div>

        <div class="mb-4">
          <h3 class="h6">Browser Info</h3>
          <pre class="small bg-white p-3 border rounded">{{ attempt.browser_info }}</pre>
        </div>

        <div class="table-responsive">
          <table class="table table-sm table-bordered table-striped align-middle">
            <thead>
              <tr>
                <th>Time</th>
                <th>Event</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              {% for event in events %}
              <tr>
                <td>{{ event.created_at }}</td>
                <td>{{ event.event_type }}</td>
                <td><pre class="mb-0 small">{{ event.payload|default:"{}" }}</pre></td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="3" class="text-center text-muted">No proctor events recorded for this attempt.</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <a class="btn btn-secondary" href="{% url 'cbt:admin_proctor_reports' %}">Back to Proctor Reports</a>
      </div>
    </div>
  </div>
</div>
{% endblock %}