{% extends "base.html" %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card shadow border-0">
      <div class="card-header bg-primary text-white">
        <h4 class="mb-0"><i class="bi bi-question-circle"></i> Question Detail</h4>
      </div>
      <div class="card-body">
        <!-- Institution and Level -->
        <div class="text-center mb-3">
          <h2 class="display-6">{{ question.institution }}</h2>
          <h5 class="text-muted">{{ question.level }}</h5>
          <p class="lead">{{ question.question_date }}</p>
        </div>

        <!-- Metadata -->
        <dl class="row">
          <dt class="col-sm-4">Subject</dt>
          <dd class="col-sm-8">{{ question.subject }}</dd>

          {% if question.paper %}
          <dt class="col-sm-4">Paper</dt>
          <dd class="col-sm-8">{{ question.paper }}</dd>
          {% endif %}

          {% if question.group %}
          <dt class="col-sm-4">Group</dt>
          <dd class="col-sm-8">{{ question.group }}</dd>
          {% endif %}

          {% if question.chapter %}
          <dt class="col-sm-4">Chapter</dt>
          <dd class="col-sm-8">{{ question.chapter }}</dd>
          {% endif %}

          {% if question.marks %}
          <dt class="col-sm-4">Marks</dt>
          <dd class="col-sm-8"><span class="badge bg-warning text-dark">{{ question.marks }}</span></dd>
          {% endif %}

          <dt class="col-sm-4">Question No.</dt>
          <dd class="col-sm-8">{{ question.question_number }}</dd>
        </dl>

        <!-- Question text combined -->
        <div class="border-top pt-3 mt-3">
          <h5><i class="bi bi-translate"></i> Question</h5>
          <div class="p-3 bg-light rounded">
            {% if question.nepali_transcription %}
              <p class="mb-1">{{ question.nepali_transcription|safe }}</p>
            {% endif %}
            {% if question.english_transcription %}
              <p class="text-muted mb-0">({{ question.english_transcription|safe }})</p>
            {% endif %}
            {% if question.notes %}
              <div class="mt-2 text-warning">
                <i class="bi bi-pencil"></i> <strong>Note:</strong> {{ question.notes }}
              </div>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card-footer text-end">
        {% if back_url %}
          <a href="{{ back_url }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back</a>
        {% else %}
          <a href="{{ url_for('question_list') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back to list</a>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}