{{ 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">
        <p class="press_key">按 <span class="key">{{ lkeys }}</span> 將詞彙歸類為</p>
        {{ if params.primary_images }}
        {{ if 'primary' in thumbnails.left }}
        <img class="left primary category" src="{{ 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="{{ 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">
        <p class="press_key">按 <span class="key">{{ rkeys }}</span> 將詞彙歸類為</p>
        {{ if params.primary_images }}
        {{ if 'primary' in thumbnails.right }}
        <img class="right primary category" src="{{ thumbnails.right.primary }}">
        {{ endif }}
        {{ else }}
        {{ if 'primary' in block.right }}
        <div class="right primary category" style="text-align:right">{{ block.right.primary }}</div>
        {{ endif }}
        {{ endif }}

        {{ if params.secondary_images }}
        {{ if 'secondary' in thumbnails.right }}
        <img class="right secondary category" src="{{ thumbnails.right.secondary }}">
        {{ endif }}
        {{ else }}
        {{ if 'secondary' in block.right }}
        <div class="right secondary category" style="text-align:right">{{ 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">


    <div id="start-help">
        <hr/>
        {% if player.round_number == 1 %}
        <p>
            請將兩手分別放在 <span class="key">{{ lkeys }}</span> 鍵
            和 <span class="key">{{ rkeys }}</span> 鍵上。
        </p>
        {% endif %}
        <p>請按 <span class="key">{{ lkeys }}</span> 鍵將詞彙歸類為
            {{ if 'primary' in labels.left }} <span class="primary">{{ labels.left.primary }}</span> {{ endif }}
            {{ if 'primary' in labels.left and 'secondary' in labels.left }} 或 {{ endif }}
            {{ if 'secondary' in labels.left }} <span class="secondary">{{ labels.left.secondary }}</span> {{ endif }}
        </p>
        <p>請按 <span class="key">{{ rkeys }}</span> 鍵將詞彙歸類為
            {{ if 'primary' in labels.right }} <span class="primary">{{ labels.right.primary }}</span> {{ endif }}
            {{ if 'primary' in labels.right and 'secondary' in labels.right }} 或 {{ endif }}
            {{ if 'secondary' in labels.right }} <span class="secondary">{{ labels.right.secondary }}</span> {{ endif }}
        </p>

        <p>

            當你分類錯誤，畫面將會顯示警示符號，請按另一按鍵以將詞彙分到正確類別。<br>
            請盡可能<span style="color:red;">正確並快速</span>將詞彙分類。
        </p>
        <p>請按 <span class="key">空白鍵（SPACE）</span> 開始。</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 src="{{ static 'iat.js' }}"></script>
{{ if DEBUG }}
<script src="{{ static 'iat_cheating.js' }}"></script>{{ endif }}
{{ endblock }}