{% extends "base.html" %}
{% block title %}
    Stackexchange Simulator Quiz - {{ question.title.text }}
{% endblock %}
{% block extraclasses %}quiz{% endblock %}
{% block body %}

    <header>
        <h1>Stackexchange Simulator Quiz</h1>
    </header>

    {% if stats.correct <3 %}
        <div class="tutorial">
            <h3>Tutorial:</h3>
            <p>Guess which of the Stack Exchange sites this question could belong to.</p>
            {% if difficulty=="easy" %}
                <p>There are four possible answers below.</p>
                <p>Press <strong>Next</strong> to get to the next Question.</p>
                <p>
                    If you think this is too easy, you can try out
                    <a href="{{ url_for("quiz",difficulty="hard") }}">the hard quiz</a>
                    which doesn't have possible answers.
                </p>
            {% else %}
                <p>
                    Then enter your guess into the textbox below, select the website
                    and click on <strong>check</strong> to confirm your guess.
                </p>
                <p>Alternativly you can select a site with the arrow keys and press enter twice to confirm it.</p>
                <p>
                    If you think this is too hard, you can try out
                    <a href="{{ url_for("quiz",difficulty="easy") }}">the easy quiz</a>
                    which does have possible answers to choose from.
                </p>
            {% endif %}
        </div>
    {% endif %}

    {% if difficulty=="easy" %}
        <div id="quizchoices" data-id="{{ question.id }}">
            {% for choice in choices %}
                <button data-id="{{ choice.id }}" data-url="{{ choice.url }}"
                        style="color: {{ choice.foreground_color }};background-color: {{ choice.background_color }};
                                {{ ("border: solid 1px " + choice.foreground_color) if choice.background_color and is_light_color(choice.background_color) }}"
                >{{ choice.name }}</button>
            {% endfor %}
        </div>
    {% else %}
        <div id="quizselector">
            <input title="guess the correct site" id="siteselector" data-mode="quiz" data-id="{{ question.id }}"
                   autocomplete='off'>
            <button id="check">Check</button>
        </div>
    {% endif %}
    <div id="result">
        <div id="correct">
            Correct!
        </div>
        <div id="incorrect">
            Incorrect!
        </div>
    </div>
    <div id="stats">
        <div>Total<br><span>{{ stats.total }}</span></div>
        <div>Correct<br><span>{{ stats.correct }}</span></div>
        <div>Ratio<br><span>{{ '%d' | format((stats.correct / stats.total * 100) if stats.correct > 0 else 0) }}</span>%
        </div>
        <button id="next">Next</button>
    </div>

    <header class="siteheader"
            style="">
    </header>


    <h1>{{ question.title.text }}</h1>
    <div class="content question">
        <div class="vote" data-id="{{ question.id }}" data-type="question">
            <a class="up"></a>
            <div>{{ question.upvotes - question.downvotes }}</div>
            <a class="down"></a>
        </div>
        <div class="contentbox">

            {% for paragraph in question.text.split("\n") %}
                <p>{{ paragraph }}</p>
            {% endfor %}
            <div class="contentfooter">
                <div class="authorbox">
                    asked {{ prettydate(question.datetime) }}
                    <br>
                    {{ question.user.username }}
                </div>
            </div>
        </div>
    </div>

{% endblock %}