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

{{ block content }}
<div class="d-flex align-items-center justify-content-center h-50">
    <div class="border border-info border-4 w-75 px-3 my-4">
        <div class="corners-container">
            <div class="left corner text-center">
                Premi <span class="key">"{{ lkeys }}"</span> per
                {{ if params.secondary_images }}
                {{ if 'secondary' in thumbnails.left }}
                <div class="left secondary category">{{ labels.left.secondary }}</div>
                {{ endif }}
                {{ else }}
                {{ if 'secondary' in block.left }}
                <div class="left secondary category">{{ block.left.secondary }}</div>
                {{ endif }}
                {{ endif }}

                {{ if block.round_nr == 3 or block.round_nr == 4 or block.round_nr == 6 or block.round_nr == 7}}
                <div class="text-center category"><span> oppure</span></div>
                {{ endif }}

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





            </div>
            <div class="right corner text-center">
                Premi <span class="key">"{{ rkeys }}"</span> per

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

                {{ if block.round_nr == 3 or block.round_nr == 4 or block.round_nr == 6 or block.round_nr == 7}}
                <div class="text-center category"><span> oppure </span></div>
                {{ endif }}

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


            </div>
        </div>

        <div class="stimulus-container m-1 d-none" id = "stimulus-container">
            <p class="stimulus" id="stimulus"></p>
            <img class="stimulus" id="stimulus-img">
        </div>
        <div class="feedback text-center">
            <p class="error-msg text-danger d-none" id="warning">X</p>
        </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-helpp">
                <p class="text-center"><u>Parte {{ block.title }} di 7</u></p>
                {{ if block.round_nr < 3 }}
                <p class = "lead alert alert-warning" role="alert">Metti un dito sul tasto <span class="key"><b>{{ lkeys }}</b></span> per gli elementi che appartengono
                    alla categoria
                    {{ if 'primary' in labels.left }} <span class="primary">{{ labels.left.primary }}</span> {{ endif }}
                    {{ if 'primary' in labels.left and 'secondary' in labels.left }} o {{ endif }}
                    {{ if 'secondary' in labels.left }} <span class="secondary">{{ labels.left.secondary }}</span> {{
                    endif }}
                    <br>
                    Metti un dito sul tasto <span class="key"><b>{{ rkeys }}</b></span> per gli elementi che
                    appartengono alla categoria
                    {{ if 'primary' in labels.right }} <span class="primary">{{ labels.right.primary }}</span> {{ endif
                    }}
                    {{ if 'primary' in labels.right and 'secondary' in labels.right }} o {{ endif }}
                    {{ if 'secondary' in labels.right }} <span class="secondary">{{ labels.right.secondary }}</span> {{
                    endif }}
                    </p>

                    {{ if block.round_nr == 1}} <span>  Gli elementi appariranno uno alla volta. </span>  {{ endif }}
                    {{ else }}
                <p class = "lead alert alert-warning" role="alert">
                    {{ if block.round_nr == 5}} <span> <b> Nota che le categorie in alto hanno cambiato posizione!</b> </span>
                    <br>{{ endif }}
                    {{ if block.round_nr == 7 or block.round_nr == 4 }}
                    <span>  Questa parte è come la precedente. </span> <br> {{ endif }}
                    Premi il tasto <span class="key"><b>{{ lkeys }}</b></span> per
                    {{ if 'primary' in labels.left }} <span class="primary">{{ labels.left.primary }}</span> {{ endif }}
                    {{ if 'primary' in labels.left and 'secondary' in labels.left }} e per {{ endif }}
                    {{ if 'secondary' in labels.left }} <span class="secondary">{{ labels.left.secondary }}</span> {{
                    endif }}
                    <br>
                    Premi il tasto <span class="key"><b>{{ rkeys }}</b></span> per
                    {{ if 'primary' in labels.right }} <span class="primary">{{ labels.right.primary }}</span> {{ endif
                    }}
                    {{ if 'primary' in labels.right and 'secondary' in labels.right }} e per {{ endif }}
                    {{ if 'secondary' in labels.right }} <span class="secondary">{{ labels.right.secondary }}</span> {{
                    endif }}
                    </p>
                    {{ if block.round_nr == 3 or block.round_nr == 4 or block.round_nr == 6 or block.round_nr == 7}}
                     <span>  Ogni elemento appartiene ad una sola categoria. </span>
                    {{ endif }}

                    {{ endif }}


            </div>
            <p> Se si commette un errore, apparirà un simbolo <span class="text-danger font-weight-bold">X</span> rosso.
                Premi il tasto riferito alla risposta corretta per continuare. </p>
            <div id="start-help">
                <p><u>Ricordati di andare il più velocemente possibile </u> cercando di fare pochi errori.</p>
                <p class="text-center"> Premi la <b>barra spaziatrice</b> per cominciare.</p>
            </div>
        </div>
    </div>
    <progress class = "d-none" id="progress-bar" max="{{ num_iterations }}" value="0"></progress>


</div>
{{ endblock }}

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