{% extends 'base.html' %}

{% block content %}
<div class="container py-4 py-lg-5">
  <!-- Header -->
  <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4 mb-lg-5">
    <div>
      <h1 class="h3 fw-bold mb-1">Scholarship Assessments</h1>
      <p class="text-muted mb-0">Attempt the available CBT assessments for scholarship screening.</p>
    </div>
    <a href="{% url 'cbt:user_dashboard' %}" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left me-1"></i> Dashboard
    </a>
  </div>

  {% if assessments %}
    <div class="row g-4">
      {% for assessment in assessments %}
        <div class="col-12">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body p-4">
              <div class="d-flex flex-column flex-lg-row justify-content-between gap-4">
                <!-- Left: Info -->
                <div class="flex-grow-1">
                  <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                    <h2 class="h5 fw-bold mb-0">{{ assessment.title }}</h2>
                    <span class="badge bg-light text-dark border">{{ assessment.year }}</span>
                  </div>

                  <p class="text-muted mb-3">
                    {{ assessment.description|default:"Complete the assessment to evaluate your readiness." }}
                  </p>

                  <div class="d-flex flex-wrap gap-3 text-muted small mb-3">
                    <span>
                      <i class="fas fa-clock me-1"></i>
                      {{ assessment.duration_minutes }} Minutes
                    </span>
                  </div>

                  {% if assessment.subjects_list %}
                    <div class="d-flex flex-wrap gap-2">
                      {% for subject in assessment.subjects_list %}
                      
                        <span class="badge bg-light text-dark border">{{ subject.name }}</span>
                      {% endfor %}
                    </div>
                  {% else %}
                    <div class="d-flex flex-wrap gap-2">
                      <span class="badge bg-light text-dark border">General</span>
                    </div>
                  {% endif %}
                </div>

                <!-- Right: Actions -->
                <div class="d-flex flex-column flex-sm-row flex-lg-column align-items-stretch align-items-sm-center align-items-lg-end gap-2 flex-shrink-0">
                  {% if is_staff %}
                    <div class="d-flex flex-wrap gap-2 justify-content-sm-end">
                      {% if assessment.is_active %}
                        <span class="badge bg-success align-self-center">Published</span>
                      {% else %}
                        <span class="badge bg-secondary align-self-center">Unpublished</span>
                      {% endif %}

                      <a href="{% url 'cbt:assessment_update' assessment.pk %}"
                         class="btn btn-sm btn-outline-secondary"
                         title="Edit assessment">
                        <i class="fas fa-edit me-1"></i> Edit
                      </a>

                      <a href="{% url 'cbt:assessment_questions_by_subject' assessment.pk %}"
                         class="btn btn-sm btn-outline-info"
                         title="View questions grouped by subject">
                        <i class="fas fa-list me-1"></i> Questions
                      </a>

                      <form method="post"
                            action="{% url 'cbt:toggle_assessment_publication' assessment.pk %}"
                            class="d-inline">
                        {% csrf_token %}
                        {% if assessment.is_active %}
                          <button type="submit"
                                  class="btn btn-sm btn-outline-warning"
                                  title="Unpublish assessment">
                            <i class="fas fa-eye-slash me-1"></i> Unpublish
                          </button>
                        {% else %}
                          <button type="submit"
                                  class="btn btn-sm btn-outline-success"
                                  title="Publish assessment">
                            <i class="fas fa-eye me-1"></i> Publish
                          </button>
                        {% endif %}
                      </form>
                    </div>
                  {% endif %}

                  <!-- Primary action -->
                  {% if assessment.completed %}
                    <button class="btn btn-success" disabled>
                      <i class="fas fa-check-circle me-2"></i> Completed
                    </button>
                  {% else %}
                    <a href="{% url 'cbt:assessment_detail' assessment.pk %}"
                       class="btn btn-primary px-4">
                      <i class="fas fa-play me-2"></i> Start Assessment
                    </a>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="alert alert-info d-flex align-items-center gap-3 border-0 shadow-sm">
      <i class="fas fa-info-circle fa-lg"></i>
      <div class="mb-0">No assessments are currently available.</div>
    </div>
  {% endif %}
</div>
{% endblock %}