{% extends "base.html" %}
{% block content %}
<div class="row">
  <div class="col">
    <div class="card shadow border-0">
      <div class="card-header bg-primary text-white">
        <h4><i class="bi bi-book"></i> Questions for Chapter: {{ chapter_code }}</h4>
      </div>
      <div class="card-body">
        {% for subject, groups in grouped.items()|sort %}
          <h5 class="mt-4 text-secondary"><i class="bi bi-tag"></i> Subject: {{ subject }}</h5>
          {% for group, qs in groups.items()|sort %}
            <h6 class="mt-3"><i class="bi bi-tag"></i> Group: {{ group }}</h6>
            <ul class="list-unstyled ps-3">
              {% for q in qs|sort(attribute='question_number') %}
                <li class="question-item mb-3 p-2 bg-light rounded">
                  <div class="d-flex align-items-start">
                    <span class="fw-bold fs-5 me-3 text-primary">{{ q.question_number }}.</span>
                    <div class="flex-grow-1">
                      <div class="mb-1">
                        {% if q.marks %}
                          <span class="badge bg-warning text-dark me-2">{{ q.marks }} marks</span>
                        {% endif %}
                        {% if q.paper %}
                          <span class="badge bg-info text-dark">{{ q.paper }}</span>
                        {% endif %}
                      </div>
                      <div class="question-text">
                        {% if q.nepali_transcription %}
                          <span>{{ q.nepali_transcription|safe }}</span>
                        {% endif %}
                        {% if q.english_transcription %}
                          <span class="text-muted"> ({{ q.english_transcription|safe }})</span>
                        {% endif %}
                      </div>
                      <div class="mt-1">
                        <a href="{{ url_for('question_detail', id=q.id, back_url=request.url) }}" class="btn btn-sm btn-link">View details</a>
                      </div>
                    </div>
                  </div>
                </li>
              {% endfor %}
            </ul>
          {% endfor %}
        {% endfor %}
      </div>
      <div class="card-footer">
        <a href="{{ url_for('browse_chapters') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back to chapters</a>
        <a href="{{ url_for('question_list') }}" class="btn btn-outline-primary"><i class="bi bi-list"></i> All Questions</a>
      </div>
    </div>
  </div>
</div>

<style>
  .question-item {
    transition: background-color 0.2s;
  }
  .question-item:hover {
    background-color: #e8f0fe !important;
  }
  .question-text {
    font-size: 1.02rem;
    line-height: 1.6;
  }
  .question-text .text-muted {
    font-size: 0.95rem;
  }
</style>
{% endblock %}