{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/quiz.css') }}">
{% endblock %}
{% block content %}
<div class="quiz-builder-page" data-quiz-slug="{{ quiz.slug }}">
    <a href="{{ quiz.url }}" class="back-link">&larr; Back to the quiz</a>

    {% if quiz_error %}
    <div class="quiz-banner quiz-banner-error" role="alert">{{ quiz_error }}</div>
    {% endif %}

    {% if quiz.status == 'published' %}
    <div class="quiz-banner quiz-banner-locked" role="status">
        This quiz is published and permanently frozen. Its questions, options and settings can never
        be edited again, so every score stays comparable. The only remaining operation is deleting it.
    </div>
    {% endif %}

    <h1 class="rendered-title">{{ render_title(quiz.title) }}</h1>

    {% if quiz.status == 'draft' %}
    <dp-quiz-builder data-quiz-slug="{{ quiz.slug }}">
    <section class="quiz-builder-settings">
        <h2>Quiz settings</h2>
        <form method="POST" action="/quizzes/edit/{{ quiz.slug }}" class="quiz-form">
            <label class="quiz-field">
                <span class="quiz-field-label">Title</span>
                <input type="text" name="title" required minlength="3" maxlength="200" value="{{ quiz.title }}">
            </label>
            <label class="quiz-field">
                <span class="quiz-field-label">Description</span>
                <textarea name="description" rows="4" maxlength="5000">{{ quiz.description }}</textarea>
            </label>
            {% set _quiz = quiz %}{% include "_quiz_settings_fields.html" %}
            <div class="quiz-form-actions">
                <button type="submit" class="btn btn-primary">Save settings</button>
            </div>
        </form>
    </section>

    <section class="quiz-builder-add">
        <h2>Add a question</h2>
        <form method="POST" action="/quizzes/{{ quiz.slug }}/questions" class="quiz-form" data-quiz-question-form>
            <label class="quiz-field">
                <span class="quiz-field-label">Question type</span>
                <select name="kind" data-quiz-kind-picker>
                    {% for kind in kinds %}
                    <option value="{{ kind.key }}">{{ kind.icon }} {{ kind.label }}</option>
                    {% endfor %}
                </select>
            </label>
            <label class="quiz-field">
                <span class="quiz-field-label">Prompt</span>
                <textarea name="prompt" rows="3" required maxlength="2000" placeholder="Markdown is supported."></textarea>
            </label>
            <label class="quiz-field">
                <span class="quiz-field-label">Points</span>
                <input type="number" name="points" min="1" max="100" value="1">
            </label>
            <label class="quiz-field">
                <span class="quiz-field-label">Explanation shown after answering (optional)</span>
                <textarea name="explanation" rows="2" maxlength="2000"></textarea>
            </label>

            <div class="quiz-kind-fields" data-quiz-kind-fields="options">
                <label class="quiz-field">
                    <span class="quiz-field-label">Options, one per line</span>
                    <textarea name="options" rows="4" placeholder="DELETE&#10;WAL&#10;MEMORY"></textarea>
                </label>
                <label class="quiz-field">
                    <span class="quiz-field-label">Correct option numbers, comma separated, starting at 0</span>
                    <input type="text" name="correct_indexes" placeholder="1">
                </label>
                <label class="quiz-field">
                    <span class="quiz-field-label">Accepted answers for matching or blanks, one per line, aligned with the options</span>
                    <textarea name="match_values" rows="4"></textarea>
                </label>
            </div>

            <div class="quiz-kind-fields" data-quiz-kind-fields="true_false">
                <label class="quiz-check">
                    <input type="checkbox" name="correct_boolean" value="1">
                    <span>The statement is true</span>
                </label>
            </div>

            <div class="quiz-kind-fields" data-quiz-kind-fields="free_text">
                <label class="quiz-field">
                    <span class="quiz-field-label">Reference answer</span>
                    <textarea name="expected_answer" rows="3" maxlength="2000"></textarea>
                </label>
                <label class="quiz-field">
                    <span class="quiz-field-label">Grading criteria for the AI reviewer</span>
                    <textarea name="grading_criteria" rows="3" maxlength="2000"></textarea>
                </label>
            </div>

            <div class="quiz-kind-fields" data-quiz-kind-fields="numeric">
                <label class="quiz-field">
                    <span class="quiz-field-label">Correct value</span>
                    <input type="text" inputmode="decimal" name="numeric_value" value="0">
                </label>
                <label class="quiz-field">
                    <span class="quiz-field-label">Accepted tolerance</span>
                    <input type="text" inputmode="decimal" name="numeric_tolerance" value="0">
                </label>
            </div>

            <div class="quiz-kind-fields" data-quiz-kind-fields="fill_blank">
                <label class="quiz-check">
                    <input type="checkbox" name="case_sensitive" value="1">
                    <span>Answers are case sensitive</span>
                </label>
            </div>

            <div class="quiz-form-actions">
                <button type="submit" class="btn btn-primary">Add question</button>
            </div>
        </form>
    </section>
    </dp-quiz-builder>
    {% endif %}

    <section class="quiz-builder-list">
        <h2>Questions ({{ questions|length }})</h2>
        {% set uids = questions | map(attribute='uid') | list %}
        <div class="quiz-question-list">
            {% for question in questions %}
            <div class="quiz-builder-item">
                {% set _question = question %}{% set _mode = "builder" %}{% include "_quiz_question.html" %}
                {% if quiz.viewer_can_edit %}
                <div class="quiz-question-actions">
                    {% if not loop.first %}
                    <form method="POST" action="/quizzes/{{ quiz.slug }}/questions/reorder" class="inline-form">
                        <input type="hidden" name="order" value="{{ (uids[:loop.index0 - 1] + [uids[loop.index0], uids[loop.index0 - 1]] + uids[loop.index0 + 1:]) | join(',') }}">
                        <button type="submit" class="btn btn-secondary btn-sm" aria-label="Move question up">&uarr;</button>
                    </form>
                    {% endif %}
                    {% if not loop.last %}
                    <form method="POST" action="/quizzes/{{ quiz.slug }}/questions/reorder" class="inline-form">
                        <input type="hidden" name="order" value="{{ (uids[:loop.index0] + [uids[loop.index0 + 1], uids[loop.index0]] + uids[loop.index0 + 2:]) | join(',') }}">
                        <button type="submit" class="btn btn-secondary btn-sm" aria-label="Move question down">&darr;</button>
                    </form>
                    {% endif %}
                    <form method="POST" action="/quizzes/{{ quiz.slug }}/questions/{{ question.uid }}/delete" class="inline-form">
                        <button type="submit" class="btn btn-danger btn-sm" data-confirm="Delete this question?" data-confirm-danger>Delete</button>
                    </form>
                </div>
                {% endif %}
            </div>
            {% else %}
            <div class="empty-state">No questions yet. Add the first one above.</div>
            {% endfor %}
        </div>
    </section>

    {% if quiz.status == 'draft' %}
    <section class="quiz-publish">
        <h2>Publish</h2>
        {% if validation_errors %}
        <ul class="quiz-checklist" aria-label="Pre-publish checklist">
            {% for problem in validation_errors %}
            <li class="quiz-checklist-item">{{ problem }}</li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="quiz-publish-ready">This quiz is ready to publish.</p>
        {% endif %}
        <form method="POST" action="/quizzes/{{ quiz.slug }}/publish" class="inline-form">
            <button type="submit" class="btn btn-primary"
                    data-confirm="Publishing is permanent. This quiz, its questions and its options can never be edited again. Publish it now?"
                    data-confirm-danger {% if validation_errors %}disabled{% endif %}>Publish quiz</button>
        </form>
    </section>
    {% endif %}
</div>
{% endblock %}