{% extends "base/consent.html" %}
{% import "macros/browser-detect.html" as browser_detect with context %}
{# This page extends Dallinger's consent layout rather than psynet_layout.html,
   so it needs the viewport meta directly. #}
{% import "macros/head.html" as psynet_head %}

{% block head %}
    {{ super() }}
    {{ psynet_head.viewport() }}
    {{ browser_detect.head() }}
{% endblock %}

{% block stylesheets %}
    {{ super() }}
    {% include "theme.html" %}
    <style>
        #consent {
            float: none;
        }
    </style>
{% endblock %}

{% block body %}
    {{ browser_detect.body() }}
    {% if not experiment.with_lucid_recruitment() %}
        <div class="container d-flex align-items-center justify-content-center" style="min-height: 90vh">
            <div class="psynet-surface">
                <div class="row overflow-hidden mb-3" style="height: 73px;">
                    <img id="adlogo" style="display: none" alt="Lab Logo" />
                </div>
                <div class="row">
                    <div class="text-center">
                        <h3 class="mb-3">
                            {{ pgettext("consent", "To proceed, click the button below.") }}
                        </h3>
                        <button
                                type="button"
                                class="btn btn-primary btn-lg"
                                id="consent"
                                onClick="start();">
                            {{ gettext("Next") }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            let isValidBrowser = browser.validate();
            {% if experiment.with_lucid_recruitment() %}
                if (!isValidBrowser) {
                    terminateParticipant("invalid-browser");
                }
            {% endif %}
        });

        start = function() {
            // Replace so Back from the timeline does not return to this Next page.
            window.location.replace('/start?{{query_string|safe}}');
        }
        {% if experiment.with_lucid_recruitment() %}
            start();
        {% endif %}
    </script>
{% endblock %}