{% extends "base.html" %}

{% block title %}Admin Dashboard{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
    <div>
      <p class="text-uppercase text-muted small fw-semibold mb-1">System control</p>
      <h1 class="h3 mb-0">Admin Dashboard</h1>
    </div>
    <div class="d-flex flex-wrap gap-2">
      <a href="{% url 'cbt:assessment_create' %}" class="btn btn-primary btn-sm">New Assessment</a>
      <a href="{% url 'cbt:admin_upload_data' %}" class="btn btn-outline-secondary btn-sm">Upload Data</a>
    </div>
  </div>

  <div class="row g-4 mb-4">
    <div class="col-md-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="text-muted small">Users</div>
          <div class="display-6 fw-bold">{{ total_users }}</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="text-muted small">Assessments</div>
          <div class="display-6 fw-bold">{{ total_assessments }}</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="text-muted small">Active assessments</div>
          <div class="display-6 fw-bold text-success">{{ active_assessments }}</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-body">
          <div class="text-muted small">Questions</div>
          <div class="display-6 fw-bold">{{ total_questions }}</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-4">
    <div class="col-lg-7">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
          <h2 class="h5 mb-0">Recent assessments</h2>
          <a href="{% url 'cbt:assessment_list' %}" class="btn btn-link btn-sm p-0">View all</a>
        </div>
        <div class="list-group list-group-flush">
          {% for assessment in assessments %}
            <div class="list-group-item d-flex justify-content-between align-items-center gap-3">
              <div>
                <div class="fw-semibold">{{ assessment.title }}</div>
                <div class="small text-muted">{{ assessment.year }} · {{ assessment.duration_minutes }} mins</div>
              </div>
              <div class="text-end">
                {% if assessment.is_active %}
                  <span class="badge bg-success">Active</span>
                {% else %}
                  <span class="badge bg-secondary">Inactive</span>
                {% endif %}
                <div class="mt-2 d-flex justify-content-end gap-2 flex-wrap">
                  <a href="{% url 'cbt:assessment_questions_by_subject' assessment.pk %}" class="btn btn-sm btn-outline-primary">View Subjects</a>
                  <a href="{% url 'cbt:assessment_update' assessment.pk %}" class="btn btn-sm btn-outline-secondary">Edit</a>
                </div>
              </div>
            </div>
          {% empty %}
            <div class="list-group-item text-muted">No assessments have been created yet.</div>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="col-lg-5">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header bg-white border-0">
          <h2 class="h5 mb-0">Subjects</h2>
        </div>
        <div class="list-group list-group-flush">
          {% for subject in subjects %}
            <div class="list-group-item d-flex justify-content-between align-items-center gap-3">
              <div>
                <div class="fw-semibold">{{ subject.name }}</div>
                <div class="small text-muted">{{ subject.assessment.title }}</div>
              </div>
              <div class="d-flex align-items-center gap-2">
                {% if subject.is_active %}
                  <span class="badge bg-success">Active</span>
                {% else %}
                  <span class="badge bg-secondary">Inactive</span>
                {% endif %}
                <form method="post" action="{% url 'cbt:toggle_subject_status' subject.pk %}">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-sm {% if subject.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %}">
                    {% if subject.is_active %}Disable{% else %}Enable{% endif %}
                  </button>
                </form>
              </div>
            </div>
          {% empty %}
            <div class="list-group-item text-muted">No subjects created yet.</div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}