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

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


    {% 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 %}