{% 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>
    <button class="btn btn-warning" type="submit" style="float: right; margin-right: 10px;"
            onclick="document.getElementById('browser').value='__SKIP_LOOP__';">
        Skip to post-loop
    </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 the University of Zurich and Tilburg 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>
    It is important for you to read the instructions carefully. They contain everything you need to know.
    We will check understanding by asking comprehension checks.
</p>

<div class="alert alert-warning">
    <strong>⚠️ Important:</strong> We use multiple methods to detect the use of AI or automation. If we determine that your responses are likely AI-generated or otherwise inauthentic, you may not receive payment.
</div>

<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>

<div class="text-end"><button class="btn btn-primary btn-large">Next</button></div>

</div>

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

{% 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 %}