{{ block title }}
    {{ block.title }}
{{ endblock }}

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

{{ block content }}
    <div class="corners-container">
        <div class="left corner">
            {{ if params.primary_images }}
                {{ if 'primary' in thumbnails.left }}
                    <img class="left primary category" src="{{ static thumbnails.left.primary }}">
                {{ endif }}
            {{ else }}
                {{ if 'primary' in block.left }}
                    <div class="left primary category">{{ block.left.primary }}</div>
                {{ endif }}
            {{ endif }}

            {{ if params.secondary_images }}
                {{ if 'secondary' in thumbnails.left }}
                    <img class="left secondary category" src="{{ static thumbnails.left.secondary }}">
                {{ endif }}
            {{ else }}
                {{ if 'secondary' in block.left }}
                    <div class="left secondary category">{{ block.left.secondary }}</div>
                {{ endif }}
            {{ endif }}
        </div>
        <div class="right corner">
            {{ if params.primary_images }}
                {{ if 'primary' in thumbnails.right }}
                    <img class="right primary category" src="{{ static thumbnails.right.primary }}">
                {{ endif }}
            {{ else }}
                {{ if 'primary' in block.right }}
                    <div class="right primary category">{{ block.right.primary }}</div>
                {{ endif }}
            {{ endif }}

            {{ if params.secondary_images }}
                {{ if 'secondary' in thumbnails.right }}
                    <img class="right secondary category" src="{{ static thumbnails.right.secondary }}">
                {{ endif }}
            {{ else }}
                {{ if 'secondary' in block.right }}
                    <div class="right secondary category">{{ block.right.secondary }}</div>
                {{ endif }}
            {{ endif }}
        </div>
    </div>
    <div class="corners-container">
        <div class="left corner">
            {{ if params.primary_images }}
                {{ if 'primary' in thumbnails.left }}
                    <div class="left primary category">{{ block.left.primary }}</div>
                {{ endif }}
            {{ else }}
                {{ if 'primary' in block.left }}
                    <div class="left primary category">{{ block.left.primary }}</div>
                {{ endif }}
            {{ endif }}

            {{ if params.secondary_images }}
                {{ if 'secondary' in thumbnails.left }}
                    <div class="left secondary category">{{ block.left.secondary }}</div>
                {{ endif }}
            {{ else }}
                {{ if 'secondary' in block.left }}
                    <div class="left secondary category">{{ block.left.secondary }}</div>
                {{ endif }}
            {{ endif }}
        </div>
        <div class="right corner">
            {{ if params.primary_images }}
                {{ if 'primary' in thumbnails.right }}
                    <div class="right primary category">{{ block.right.primary }}</div>
                {{ endif }}
            {{ else }}
                {{ if 'primary' in block.right }}
                    <div class="right primary category">{{ block.right.primary }}</div>
                {{ endif }}
            {{ endif }}

            {{ if params.secondary_images }}
                {{ if 'secondary' in thumbnails.right }}
                    <div class="right secondary category">{{ block.right.secondary }}</div>
                {{ endif }}
            {{ else }}
                {{ if 'secondary' in block.right }}
                    <div class="right secondary category">{{ block.right.secondary }}</div>
                {{ endif }}
            {{ endif }}
        </div>
    </div>

    <div class="stimulus-container m-1">
        <p class="stimulus" id="stimulus"></p>
        <img class="stimulus" id="stimulus-img">
    </div>

    <div class="feedback input-group">
        <input type="text" id="answer-inp" class="form-control" readonly>
        <div class="invalid-feedback" id="warning-txt"></div>
    </div>


    <div class="instructions">
        <hr/>
        <p>Press <span class="key">{{ lkeys }}</span> or touch top-left corner for
            {{ if 'primary' in labels.left  }} <span class="primary">{{ labels.left.primary }}</span> {{ endif }}
            {{ if 'primary' in labels.left and 'secondary' in labels.left }} or {{ endif }}
            {{ if 'secondary' in labels.left }} <span class="secondary">{{ labels.left.secondary }}</span> {{ endif }}
        </p>
        <p>Press <span class="key">{{ rkeys }}</span> or touch top-right corner  for
            {{ if 'primary' in labels.right }} <span class="primary">{{ labels.right.primary }}</span> {{ endif }}
            {{ if 'primary' in labels.right and 'secondary' in labels.right }} or {{ endif }}
            {{ if 'secondary' in labels.right }} <span class="secondary">{{ labels.right.secondary }}</span> {{ endif }}
        </p>

        <div id="start-help">
            <p><b>To begin</b>, press SPACE or touch middle of the screen.</p>
        </div>
    </div>

    <progress id="progress-bar" max="{{ num_iterations }}" value="0"></progress>

    {{ if DEBUG }}
    <button type="button" id="cheat-btn" class="btn btn-dark">Cheat</button>
    <input type="range" min="0" max="2" step="0.1" value="1.0" id="cheat-reaction">
    {{ endif }}

{{ endblock }}

{{ block scripts }}
<script>
    const images_url = "/static/images/";
</script>
<script src="{{ static 'iat.js' }}"></script>
{{ if DEBUG }}<script src="{{ static 'iat_cheating.js' }}"></script>{{ endif }}
{{ endblock }}