{% extends "base.html" %}

{% block title %}Questions: {{ assessment.title }}{% endblock %}

{% block content %}
<div class="container py-1 py-lg-3">
  <!-- 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">{{ assessment.title }}</h1>
      <p class="text-muted mb-0">
        {{ assessment.year }} · Questions grouped by subject
      </p>
    </div>
    <a href="{% url 'cbt:assessment_list' %}"
      class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left me-1"></i> Back to Assessments
    </a>
  </div>
  <div class="d-flex flex-wrap gap-1 mb-1 mb-lg-5">
    <a href="{% url 'cbt:admin_question_create' %}"
      class="btn btn-outline-primary btn-sm">
      <i class="fa fa-plus" aria-hidden="true"></i> Add Questions
    </a>
    <a href="{% url 'cbt:admin_upload_data' %}"
      class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-upload me-1"></i> Upload Questions
    </a>
    <a href="{% url 'cbt:admin_subject_create' %}"
      class="btn btn-outline-success btn-sm">
      <i class="fas fa-upload me-1"></i> Add Subjects
    </a>
    <a href="{% url 'cbt:admin_upload_data' %}"
      class="btn btn-outline-info btn-sm">
      <i class="fas fa-upload me-1"></i> Upload Subjects
    </a>
  </div>
  {% if subjects %}
  <div class="accordion" id="subjectsAccordion">
    {% for subject in subjects %}
    <div class="accordion-item border-0 shadow-sm mb-1 rounded overflow-hidden">
      <h2 class="accordion-header" id="heading-{{ subject.id }}">
        <button
          class="accordion-button {% if not forloop.first %}collapsed{% endif %} fw-semibold"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-{{ subject.id }}"
          aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
          aria-controls="collapse-{{ subject.id }}">
          <span class="me-auto">{{ subject.subject_type.name }}</span>
          <span class="badge bg-primary-subtle text-primary ms-3">
            {{ subject.questions.all|length }} question{{ subject.questions.all|length|pluralize }}
          </span>
        </button>
      </h2>

      <div
        id="collapse-{{ subject.id }}"
        class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
        aria-labelledby="heading-{{ subject.id }}"
        data-bs-parent="#subjectsAccordion">
        <div class="accordion-body pt-3">
          {% for question in subject.questions.all %}
          <article
            class="border-bottom pb-4 mb-4 {% if forloop.last %}border-0 pb-0 mb-0{% endif %}">
            <div
              class="d-flex flex-column flex-sm-row justify-content-between gap-2 mb-2">
              <h3 class="h6 fw-semibold mb-0">
                <span class="text-muted me-1">{{ forloop.counter }}.</span>
                {{ question.prompt }}
              </h3>
              <span class="badge bg-secondary align-self-start flex-shrink-0">
                {{ question.marks }} mark{{ question.marks|pluralize }}
              </span>
            </div>

            <div class="text-muted small mb-3">
              {{ question.get_question_type_display }}
            </div>

            {% if question.options.all %}
            <div class="row g-2">
              {% for option in question.options.all %}
              <div class="col-12 col-md-6">
                <div class="border rounded p-3 h-100
                                      {% if option.is_correct %}
                                        border-success bg-success-subtle
                                      {% endif %}">
                  <div
                    class="d-flex justify-content-between align-items-start gap-2">
                    <div>
                      <strong class="me-1">{% cycle 'A' 'B' 'C' 'D' %}.</strong>
                      {{ option.text }}
                    </div>
                    {% if option.is_correct %}
                    <span class="badge bg-success flex-shrink-0">Correct</span>
                    {% endif %}
                  </div>
                </div>
              </div>
              {% endfor %}
            </div>
            {% endif %}
          </article>
          {% empty %}
          <p class="text-muted mb-0">No questions have been assigned to this
            subject.</p>
          {% endfor %}
        </div>
        <div class="card-footer d-flex flex-wrap gap-2 p-3">
      <a href="{% url 'cbt:admin_question_create' %}" class="btn btn-primary">Add Question</a>
      <a href="{% url 'cbt:admin_question_upload' subject.id %}" class="btn btn-primary">Upload Question</a>
    </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 subjects have been added to this assessment.</div>
  </div>
  {% endif %}

  <!-- Unassigned Questions -->
  {% if unassigned_questions %}
  <div
    class="card border-0 shadow-sm border-start border-warning border-4 mt-4">
    <div class="card-header bg-warning-subtle border-0">
      <h2 class="h5 mb-0 d-flex align-items-center gap-2">
        <i class="fas fa-exclamation-triangle text-warning"></i>
        Unassigned Questions
        <span class="badge bg-warning text-dark ms-1">
          {{ unassigned_questions|length }}</span>
      </h2>
    </div>
    <div class="card-body">
      <ul class="list-group list-group-flush">
        {% for question in unassigned_questions %}
        <li class="list-group-item px-0 py-2 border-0 border-bottom">
          <strong class="text-muted me-1">{{ forloop.counter }}.</strong>
          {{ question.prompt }}
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}