{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block title %}
       {{ title }}
{% endblock %}

{% block content %}


<script>

</script>

<div class="card bg-light instructions">
<div class="card-body">
                <div class="alert alert-danger" id="error_message">
                    {{ warning | safe }}
                </div>
                    <p style> <center><b style="font-size:20px">{{ subtitle1 | safe }}</b></center><br>
                    {{ paragraph1 | safe }} <br><br>
                    <b>{{ subtitle2 | safe }}</b><br>
                        {{ paragraph2 | safe }}<br><br>
                <b>{{ subtitle3 | safe }}</b> <br>
                        {{ paragraph3 | safe }}<br><br>
                <b>{{ subtitle4 | safe }}</b> <br>
                        {{ paragraph4 | safe }}<br><br>
                <b>{{ subtitle5 | safe }}</b> <br>
                        {{ paragraph5 | safe }}<br><br>
                <b>{{ subtitle6 | safe }}</b> <br>
                        {{ paragraph6 | safe }}<br><br>
                <b>{{ subtitle7 | safe }}</b> <br>
                        {{ paragraph7 | safe }}
                </p>
                <br><br>
                <p align="right" style="position:relative;right:30px">
                    <input type="checkbox" name="consent" id="consent" value="yes">{{ consent | safe }}</p><br>
                </p>
</div>
</div>

<div align="right"><input type="submit" onclick="return submitForm();" class="btn btn-primary btn-large" value="{{confirm}}"></inputbutton></div>
<!-- tabswitches & focustime -->
<script src="{% static "jquery-3.3.1.js" %}"></script>
<script src="{% static "detect_tabswitch.js" %}"></script>
<input type="hidden" id="tab_consent" name="tab_consent" value="0">


<script>
document.getElementById("error_message").style.display = "none";
    function submitForm() {
        var submit = false;
        if(document.getElementById("consent").checked){
            submit=true;
        } else {
            document.getElementById("error_message").style.display = "block";
        }

        if($tabswitches == 0){
            $time_total = (Date.now() - $start)/1000;
            $time_focus = $time_total;
        }

        document.getElementById("tab_consent").setAttribute('value', $tabswitches);


        return submit;
    }
</script>

{% endblock %}