{% extends "base.html" %}
{% block content %}
    <h1>Take the Quiz</h1>

    <p>
        Please answer the following {{ questions|length }} questions. None of the questions are mandatory, and you can skip questions you are unsure of or do not want to answer. But you cannot leave the quiz blank. The more questions you answer, the better results you will get.
    </p>

    <p>
        You will also be able to select which source books you would like to see results from. You can exclude source books to narrow down the range of playbooks, or add all of them to have a full range of playboosk to choose from.
    </p>

    <form method="POST">
        <div class="form-group">
            {% for question in questions -%}
                <fieldset class="question">
                    <legend>
                        <strong>Question {{ loop.index }}</strong>: {{ question['question']|safe }}
                    </legend>
                    <table>
                        <tbody>
                            {% set name = 'q'~loop.index %}
                            {% for answer in question['answers'] -%}
                                <tr class="wrapper-option{% if loop.index == question['answers']|length %} last-option{% endif %}">
                                    <td class="wrapper-radio">
                                        <input
                                            class="form-check-input"
                                            type="radio"
                                            name="{{ name }}"
                                            id="{{ name }}.{{ loop.index }}"
                                            value="{{ loop.index }}"
                                            {% if 'submission' in session %}
                                                {{'checked' if session['submission'][name] == loop.index|lower else '' }}
                                            {% endif%}
                                        >
                                    </td>
                                    <td class="wrapper-answer">
                                        <label
                                            class="form-check-label"
                                            for="{{ name }}.{{ loop.index }}"
                                        >
                                            {{ answer['text']|safe }}
                                        </label>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </fieldset>
            {% endfor %}
            <fieldset class="source-filters">
                <h5>
                    Please select which sourcebooks you would like to include results from.
                </h5>
                {% for source in sources -%}
                    <input
                        type="checkbox"
                        name="{{ source }}"
                        id="{{ source }}"
                        {% if 'submission' in session %}
                            {{'' if source not in session['submission'] else 'checked' }}
                        {% else %}
                            checked="true"
                        {% endif %}
                        class="form-check-input"
                    >
                    <label
                        for="{{ source }}"
                        class="form-check-label sourcebook-title"
                    >
                        {{ sources[source]['title'] }}    
                    </label>
                {% endfor %}
            </fieldset>
            <div class="centre-buttons">
                <button type="submit" class="btn btn-success right-margin" href="/results">Submit</button>
                <a class="btn btn-danger left-margin" href="/reset">Reset</a>
            </div>
        </div>
    </form>
{% endblock %}