<div class="card mb-3">
    <div class="card-body">
        <div class="mb-2"><span class="badge bg-secondary">Atlas</span></div>
        <h5 class="card-title">Question</h5>
        <p class="lead">{{ question }}</p>

        <p>
            <a class="btn btn-sm btn-outline-secondary" href="{% url app_name|add:':question_detail' question.pk %}" target="_blank">View full question details</a>
        </p>

        <div class="d-flex justify-content-between mt-3">
            {% if prev_index is not None %}
                <a class="btn btn-outline-primary"
                   hx-get="{% url app_name|add:':exam_review_question' exam.pk prev_index %}"
                   hx-target="#review-content"
                   hx-swap="innerHTML"
                   hx-push-url="true">&larr; Previous</a>
            {% else %}
                <span></span>
            {% endif %}

            {% if next_index is not None %}
                <a class="btn btn-primary"
                   hx-get="{% url app_name|add:':exam_review_question' exam.pk next_index %}"
                   hx-target="#review-content"
                   hx-swap="innerHTML"
                   hx-push-url="true">Next &rarr;</a>
            {% else %}
                <a class="btn btn-success" href="{% url app_name|add:':exam_overview' exam.pk %}">Complete review</a>
            {% endif %}
        </div>
    </div>
</div>
