{% block title %}
<div id="notsorry_title" style="display: none">
Welcome
</div>
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}
<h2 id="sorry" style="display: none">Sorry, you cannot complete this study using this browser.
        Please use a recent version of Chrome (85 or up), Edge (85 or up) or
        Safari.
        Otherwise, please return the study.
</h2>

<div id="notsorry" style="display: none">
<p>
    You are invited to participate in a <b>research study</b> jointly run by Stanford University and Carnegie Mellon
    University.
</p>

<p>
    Most participants complete this study in <b>{{ C.MIN_TIME }} to {{ C.MAX_TIME }} minutes</b>.
    If you complete the study, you will receive a <b>{{ session.config.participation_fee }} payment</b>.
</p> 

<p>
    On the next page, you will see a consent form.
    Please review it carefully before deciding whether you want to participate in this study.
</p>

<p>
    When ready, click "Next" to read the consent form.
</p>

<button style="float: right" class="btn btn-primary btn-large">Next</button>

</div>


<input type="hidden" name="browser" id="browser" />

{% endblock %}

{% block styles %}

{% endblock %}

{% block scripts %}
<script src="{% static 'browserDetection.js' %}"></script>
<script>
    const parser = new UAParser();
    const version = parser.getBrowser();
    console.log(version.name,version.major);
    document.getElementById('browser').value = version.name + " " + version.major;
    if (!((version.name==="Chrome" && version.major>=85)|| (version.name==="Edge" && version.major>=85)||
        (version.name==="Safari" && version.major>=12)))
    {
        document.getElementById('sorry').style.display = 'block';
    } else {
        document.getElementById('notsorry').style.display = 'block';
        document.getElementById('notsorry_title').style.display = 'block';
    }
</script>
{% endblock %}