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

{{ block content }}
<div class="main">
    <div class="touch-spot left" data-response="left"></div>
    <div class="touch-spot right" data-response="right"></div>

    <div class="center">
        <span id="focus" class="focus hidden">⌖</span>

        <div id="stimulus" class="stimulus">
            <p id="stimulus-txt" class="hidden"></p>
            <img id="stimulus-img" class="hidden">
        </div>
    </div>

    <div class="response" id="response">
        <span id="response-txt"></span>
        <span class="feedback feedback-valid">✓</span>
        <span class="feedback feedback-invalid">❌</span>
    </div>

    <div class="warning" id="warning-txt"></div>
</div>

<progress id="progress-bar"></progress>

<div class="instructions">
    <div>
        {{ include Constants.instructions_template }}
    </div>

    <div id="start-help">
        <p><b>To start, press <kbd>Space</kbd> or touch screen...</b></p>
    </div>
</div>

{{ if DEBUG }}
<br><br><br>
<div class="card debug-info">
    <h5 class="card-header">Debug cheating</h5>
    <div class="card-body">
        response time mean: <input type="number" step="0.1" value="1.0" id="cheat-rt-inp">
        <hr>
        <button type="button" id="cheat-btn" class="btn btn-dark">Complete round</button>
    </div>
</div>
{{ endif }}

{{ endblock }}

{{ block scripts }}
<script src="{{ static 'generic_live.js' }}"></script>
{{ if DEBUG }}<script src="{{ static 'generic_cheating.js' }}"></script>{{ endif }}
<script>
const CONF = js_vars.conf;
const PARAMS = js_vars.params;

const model = new Model();
const view = new View(model);
const ctrl = new Controller(model, view);

window.onload = () => {
    liveSend({type: 'load'});
};
</script>
{{ endblock }}