{{ block title }}
    Implicit Association Test Results
{{ endblock }}

{% block styles  %}
    <link href="{% static 'iat.css' %}" rel="stylesheet"/>
{% endblock %}

{{ block content }}

    <p>Your d-score is {{dscore}}
    </p>

    <div class="d-flex flex-row">
        <div class="flex-shrink-1 m-2">
            {{neg_pairs.left.primary}} + {{neg_pairs.left.secondary}}
            <br>
            {{neg_pairs.right.primary}} + {{neg_pairs.right.secondary}}
        </div>
        <div class="flex-fill d-flex flex-column align-items-stretch justify-content-center">
            <input readonly type="range" min="-2" max="2" value="{{dscore}}">
            <div class="d-flex flex-row justify-content-between">
                <span>-2</span>
                <span>0</span>
                <span>+2</span>
            </div>
        </div>

        <div class="flex-shrink-1 m-2">
            {{pos_pairs.left.primary}} + {{pos_pairs.left.secondary}}
            <br>
            {{pos_pairs.right.primary}} + {{pos_pairs.right.secondary}}
        </div>
    </div>

{{ endblock }}