{% set _mode = _mode | default("builder") %}
{% set _answer = _question.answer | default(none) %}
{% set _answered = _answer and _answer.answered %}
<article class="quiz-question quiz-question-{{ _question.kind }}{% if _answered %} quiz-question-answered{% endif %}"
         data-quiz-question="{{ _question.uid }}" data-quiz-kind="{{ _question.kind }}"
         {% if _mode == 'player' %}data-quiz-slide="{{ _question.position }}"{% endif %}>
    <header class="quiz-question-head">
        <span class="quiz-question-index">{{ _question.position + 1 }}</span>
        <span class="quiz-question-kind">{{ _question.kind_label }}</span>
        <span class="quiz-question-points">{{ _question.points }} pt{% if _question.points != 1 %}s{% endif %}</span>
    </header>

    <div class="quiz-question-prompt rendered-content">{{ render_content(_question.prompt) }}</div>

    {% if _mode == 'player' %}
    <form method="POST" action="{{ _attempt_url }}/answer" class="quiz-answer-form" data-quiz-answer-form>
        <input type="hidden" name="question_uid" value="{{ _question.uid }}">

        {% if _question.kind == 'single_choice' %}
        <div class="quiz-options" role="radiogroup" aria-label="Options">
            {% for option in _question.options %}
            <label class="quiz-option">
                <input type="radio" name="option_uids" value="{{ option.uid }}" {% if _answered %}disabled{% endif %} required>
                <span class="quiz-option-label">{{ option.label }}</span>
            </label>
            {% endfor %}
        </div>

        {% elif _question.kind == 'multiple_choice' %}
        <div class="quiz-options" role="group" aria-label="Options">
            {% for option in _question.options %}
            <label class="quiz-option">
                <input type="checkbox" name="option_uids" value="{{ option.uid }}" {% if _answered %}disabled{% endif %}>
                <span class="quiz-option-label">{{ option.label }}</span>
            </label>
            {% endfor %}
        </div>

        {% elif _question.kind == 'true_false' %}
        <div class="quiz-options quiz-options-boolean" role="radiogroup" aria-label="True or false">
            <label class="quiz-option quiz-option-large">
                <input type="radio" name="answer_text" value="true" {% if _answered %}disabled{% endif %} required>
                <span class="quiz-option-label">True</span>
            </label>
            <label class="quiz-option quiz-option-large">
                <input type="radio" name="answer_text" value="false" {% if _answered %}disabled{% endif %} required>
                <span class="quiz-option-label">False</span>
            </label>
        </div>

        {% elif _question.kind == 'free_text' %}
        <label class="quiz-field">
            <span class="quiz-field-label">Your answer</span>
            <textarea name="answer_text" rows="6" maxlength="{{ answer_max_chars }}" {% if _answered %}disabled{% endif %} required></textarea>
        </label>

        {% elif _question.kind == 'numeric' %}
        <label class="quiz-field">
            <span class="quiz-field-label">Your answer</span>
            <input type="text" inputmode="decimal" name="answer_text" {% if _answered %}disabled{% endif %} required>
        </label>

        {% elif _question.kind == 'fill_blank' %}
        <div class="quiz-blanks">
            {% for option in _question.options %}
            <label class="quiz-field">
                <span class="quiz-field-label">{{ option.label or ('Blank ' ~ (loop.index)) }}</span>
                <input type="text" name="blanks" maxlength="500" {% if _answered %}disabled{% endif %}>
            </label>
            {% endfor %}
        </div>

        {% elif _question.kind == 'ordering' %}
        <ol class="quiz-ordering" data-quiz-ordering>
            {% for option in _question.options %}
            <li class="quiz-ordering-row">
                <span class="quiz-ordering-position">{{ loop.index }}</span>
                <select name="option_uids" aria-label="Item at position {{ loop.index }}" {% if _answered %}disabled{% endif %} required>
                    <option value="">Choose an item</option>
                    {% for choice in _question.options %}
                    <option value="{{ choice.uid }}">{{ choice.label }}</option>
                    {% endfor %}
                </select>
            </li>
            {% endfor %}
        </ol>

        {% elif _question.kind == 'matching' %}
        <div class="quiz-matching">
            {% for option in _question.options %}
            <div class="quiz-matching-row">
                <input type="hidden" name="option_uids" value="{{ option.uid }}">
                <span class="quiz-matching-left">{{ option.label }}</span>
                <select name="matches" aria-label="Match for {{ option.label }}" {% if _answered %}disabled{% endif %} required>
                    <option value="">Choose a match</option>
                    {% for choice in _question.match_choices %}
                    <option value="{{ choice }}">{{ choice }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        {% if not _answered %}
        <div class="quiz-answer-actions">
            <button type="submit" class="btn btn-primary">Submit answer</button>
        </div>
        {% endif %}
    </form>

    <div class="quiz-answer-result" data-quiz-result{% if not _answered %} hidden{% endif %}>
        {% if _answered %}
        <div class="quiz-grade{% if _answer.is_correct %} quiz-grade-correct{% else %} quiz-grade-wrong{% endif %}">
            <span class="quiz-grade-verdict">{% if _answer.is_correct %}Correct{% else %}Not correct{% endif %}</span>
            <span class="quiz-grade-points">{{ format_number(_answer.awarded_points) }} / {{ _question.points }} points</span>
        </div>
        {% if _answer.feedback %}
        <p class="quiz-grade-feedback">{{ _answer.feedback }}</p>
        {% endif %}
        {% if _answer.graded_by == 'fallback' %}
        <p class="quiz-grade-fallback" role="status">Automatic review was unavailable, so this answer was scored on keyword overlap.</p>
        {% endif %}
        {% if _question.explanation %}
        <div class="quiz-explanation rendered-content">{{ render_content(_question.explanation) }}</div>
        {% endif %}
        {% endif %}
    </div>

    {% else %}
    {% if _question.options %}
    <ul class="quiz-preview-options">
        {% for option in _question.options %}
        <li class="quiz-preview-option{% if option.is_correct %} quiz-preview-correct{% endif %}">
            <span>{{ option.label }}</span>
            {% if option.match_value %}<span class="quiz-preview-match">&rarr; {{ option.match_value }}</span>{% endif %}
        </li>
        {% endfor %}
    </ul>
    {% endif %}
    {% if _question.kind == 'true_false' %}
    <p class="quiz-preview-answer">Correct answer: {% if _question.correct_boolean %}True{% else %}False{% endif %}</p>
    {% elif _question.kind == 'numeric' %}
    <p class="quiz-preview-answer">Correct answer: {{ _question.numeric_value }} (± {{ _question.numeric_tolerance }})</p>
    {% elif _question.kind == 'free_text' %}
    <p class="quiz-preview-answer">Reference answer: {{ _question.expected_answer or '-' }}</p>
    {% endif %}
    {% if _question.explanation %}
    <div class="quiz-explanation rendered-content">{{ render_content(_question.explanation) }}</div>
    {% endif %}

    {% endif %}
</article>
