{% extends "editor/components/base.html" %}

{% block style %}
<link 
    rel="stylesheet"
    href="{{ url_for('.static', filename='css/editor.css') }}"
/>
{% endblock %}

{% block content %}
    <h1>Editor</h1>
    <div class="container">
        <p class="lead">
            Use this console to edit the questions in this dataset. For more information on using the editor console, click on the the blue Information button. To preview the questions in the current dataset, click on the green View Questions button.
        </p>
    </div>
    <div class="container control-panel">
        <button class="btn btn-primary" aria-title="Information" title="Information" data-action="info"><i class="bi bi-info-circle-fill"></i></button>
        <button class="btn btn-success" aria-title="View Questions" title="View Questions" data-action="view"><i class="bi bi-book-fill"></i></button>
    </div>
    <div class="container info-panel">
        <h3>
            About the Editor Console
        </h3>
        <p>
            This console will allow you to edit the question data for the RefTest App.
            All of the questions will be visually displayed as blocks on the screen that you can minimise, expand, and rearrange.
        </p>
        <p>
            Blocks can be of two types: <strong>Blocks</strong> of multiple related questions, and <strong>Single Questions</strong> that are not part of a block.
            You can add, remove, or edit both Blockss and Questions through this editor.
        </p>
        <p>
            <strong>Blocks</strong> are useful when you have a section of the test that contains multiple questions that are related to each other, for example if there is a scenario-based section where a series of questions are about the same situation.
        </p>
        <p>
            Blocks can contain any number of questions within them, but cannot contain nested blocks.
        </p>
        <p>
            When you set up a block, you can also add <strong>header text</strong> that will be displayed with each question.
            You can use this to provide common information for a scenario across a series of questions.
        </p>
        <p>
            Questions come in three types:
            <ul>
                <li>
                    <strong>Yes/No</strong> for when there is only a yes or no option, 
                </li>
                <li>
                    <strong>Multiple Choice</strong> for your regular multiple choice questions, and
                </li>
                <li>
                    <strong>Ordered List</strong> for multiple choice questions that will be displayed in the same order as listed here.
                </li>
            </ul>
        </p>
        <p>
            Normally, multiple choice questions will have the order of the options randomised.
        </p>
        <p>
            Questions will be displayed to candidates in a randomised order.
            Blocks of questions will be kept together, but the order within the block will also be randomised.
        </p>
        <p><strong>Do not use language that will assume the flow of questions, such as saying &lsquo;the previous question&rsquo;, or &lsquo;the next question&rsquo;, etc. because of randomisation.</strong></p>
        <p>
            Each option will be referenced by an <strong>index number</strong>.
            Make sure to select which index number represents the <strong>correct option</strong>.
        </p>
        <p>
            You will also be able to define <strong>tags</strong> for each question.
            Separate multiple tags in <strong>new lines</strong>.
            Make sure to keep the spelling, capitalisation, and punctuation for tags consistent.
        </p>
        <p class="lead">
            Placeholder for Questions Remaining in a Block
        </p>
        <p>
            In order to show how many questions are remaining inside a block, e.g. to say &lsquo;the next n questions are about a specific scenario&rsquo;, use the placeholder <code>&lt;block_remaining_questions&gt;</code>.
        </p>
    </div>
    <div class="container viewer-panel">
    </div>
    <div class="container editor-panel">
        <h3>
            Edit Questions
        </h3>
        <div class="container dataset-metadata">
            <div class="input-group mb-3">
                <span class="input-group-text">Dataset Name</span>
                <input type="text" class="form-control dataset-name" value="{{ dataset.get_name() }}">
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">Author</span>
                <select class="form-select dataset-creator">
                    {% for user in users %}
                        <option value="{{ user.id }}" {{default if dataset.user == user else None }}>{{ user.get_username() }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">Last Updated</span>
                <span class="form-control">
                    {{ dataset.date.strftime('%d %b %Y %H:%M') }}
                </span>
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">
                    <input type="checkbox" aria-label="Default" class="dataset-default" {% if dataset.default %}checked{% endif %}>
                </span>
                <span class="form-control">
                    Make Dataset the Default
                </select>
            </div>
        </div>
        <div class="accordion" id="editor-root" data-target="{{ url_for('api._editor') }}" data-id="{{ dataset.id }}">
        </div>
        {% include "editor/components/client-alerts.html" %}
        <div class="editor-controls container">
            <a href="javascript:void(0);" class="btn btn-primary" data-action="add-block" title="Add Block" aria-title="Add Block">
                <i class="bi bi-folder-plus"></i>
                Add Block
            </a>
            <a href="javascript:void(0);" class="btn btn-primary" data-action="add-question" title="Add Question" aria-title="Add Question">
                <i class="bi bi-file-plus-fill"></i>
                Add Question
            </a>
        </div>
        <div class="editor-controls container">
            <a href="javascript:void(0);" class="btn btn-warning" data-action="discard" title="Discard Changes" aria-title="Discard Changes">
                <i class="bi bi-x-circle-fill"></i>
                Discard Changes
            </a>
            <a href="javascript:void(0);" class="btn btn-danger {% if datasets <=1 or dataset.default or dataset.tests|length > 0 %}disabled{% endif %}" data-action="delete" title="Delete" aria-title="Delete">
                <i class="bi bi-trash-fill"></i>
                Delete
            </a>
            <a href="javascript:void(0);" class="btn btn-success" data-action="save" title="Save" aria-title="Save">
                <i class="bi bi-cloud-arrow-up-fill"></i>
                Save Changes
            </a>
        </div>
    </div>
{% endblock %}

{% block script %}
<script
    type="text/javascript"
    src="{{ url_for('.static', filename='js/editor.js') }}"
></script>
{% endblock %}