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

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

{% block content %}
    <h1>View Questions</h1>
    <div class="container">
        <p class="lead">
            This page lists all the questions in the selected dataset.
        </p>
    </div>
    <div class="container control-panel">
        <button class="btn btn-primary" aria-title="Information" title="Information"><i class="bi bi-info-circle-fill"></i></button>
    </div>
    <div class="container info-panel">
        <h3>
            Information
        </h3>
        <p>
            Questions in the test are arranged in blocks. 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>
            Questions can also be categorised using <strong>tags</strong>.
        </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;, the app uses the placeholder <code>&lt;block_remaining_questions&gt;</code>.
        </p>
    </div>
    <div class="container viewer-panel">
        <h3>
            Question Dataset
        </h3>
        <div class="container dataset-metadata">
            <div class="input-group mb-3">
                <span class="input-group-text">Dataset Name</span>
                <span class="form-control">
                    {{ dataset.get_name() }}
                </span>
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text">Author</span>
                <span class="form-control">
                    {{ dataset.creator.get_username() }}
                </span>
            </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>
            {% if dataset.default %}
                <div class="input-group mb-3">
                    <span class="input-group-text">
                        <input type="checkbox" aria-label="Default" class="dataset-default" checked disabled>
                    </span>
                    <span class="form-control">
                        Default Dataset
                    </select>
                </div>
            {% endif %}
        </div>
        
    </div>
{% endblock %}

{% block script %}
<script>
    const target = "{{ url_for('api._editor') }}"
    const id = "{{ dataset.id }}"
</script>
<script
    type="text/javascript"
    src="{{ url_for('.static', filename='js/view.js') }}"
></script>
{% endblock %}