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

{% block styles %}
<style>.otree-form-errors{display:none}</style>
<link rel="stylesheet" href="{% static 'global/matrix.css' %}">
{% endblock %}

{% block content %}

{# show an alert if “Next” was clicked without ticking the box #}
{% if form.consent.errors %}
<div class="alert alert-danger">
    {{ form.consent.errors.0 }}
</div>
{% endif %}

<div class="instructions well well-lg">

    <h2 class="panel-sub-heading">Informed Consent</h2>

    <p>Please read the following terms and indicate whether you accept them:</p>

    <ul>
        <li>Participation is voluntary.</li>
        <li>Data will be analysed only for this study, anonymised before sharing,
            and handled in line with data-protection law.</li>
        <li>Anonymised data may later be shared for new analyses.</li>
        <li>You may quit at any time by closing this tab (no payment if you quit).</li>
        <li>After finishing you may request information about the study.</li>
    </ul>

    <p>If you do <strong>not</strong> wish to participate, close this tab now.
        Otherwise tick the box below and click <em>Next</em>.</p>

    <label class="form-check-label">
        <input  type="checkbox"
                class="form-check-input"
                name="consent"
                value="True">
        I have read all the terms and confirm their acceptance.
    </label>

</div>

{# button also submits the hidden “submit_noConsent” field #}
<button class="btn btn-primary" name="submit_noConsent" value="True">
    Next
</button>

{% endblock %}