<p class="fw-semibold mb-3">{{ question.question }}</p>

<ul class="list-group">
    {% for answer in question.answers %}
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span{% if answer.isRightAnswer %} class="fw-semibold"{% endif %}>
                {% if answer.isRightAnswer %}<i class="bi bi-check-circle-fill text-success me-1"></i>{% endif %}
                {{ answer.text }}
            </span>
            {% if answer.candidates|length > 0 %}
                <span class="text-muted small">{{ answer.candidates|map(c => c.name)|join(', ') }}</span>
            {% endif %}
        </li>
    {% else %}
        <li class="list-group-item text-muted">{{ 'There are no answers for this question'|trans }}</li>
    {% endfor %}
</ul>

<template data-modal-footer>
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Close'|trans }}</button>
</template>
