{% extends "layout.html" %}
{% import "macros/browser-detect.html" as browser_detect with context %}
{# This page extends Dallinger's 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" %}
{% endblock %}

{% block body %}
    {{ browser_detect.body() }}
    <div class="container my-5 psynet-surface" id="container-not-an-ad">
        <div id="ad">
            <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="col-12">
                    {% block ad %}

                    {% if (mode == "sandbox") or (mode == "debug") %}
                        {% block sandbox_or_debug %}
                            <p>
                                <b>Application ID:</b> {{ app_id }}.
                            </p>
                        {% endblock sandbox_or_debug %}
                    {% endif %}

                    {% block live %}
                        {% if not experiment.with_lucid_recruitment() %}
                            <h1>{{ pgettext("ad", "Thanks for your interest in this experiment.") }}</h1>
                            <p>
                                {{ pgettext("ad", "By clicking the following URL link, you will be taken to the experiment, including complete instructions and an informed consent agreement.") }}
                            </p>

                            {% if not config.force_incognito_mode %}
                                <div class="alert alert-warning">
                                    <span class="fw-bold">{{ pgettext("ad", "Warning") }}</span>: {{ pgettext("ad", "Please disable pop-up blockers before continuing.") }}
                                </div>
                            {% endif %}

                            <button type="button" id="begin-button" class="btn btn-primary btn-lg">
                                {{ pgettext("ad", "Begin Experiment") }}
                            </button>
                        {% endif %}
                    {% endblock live %}
                {% endblock ad %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}


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

        function proceedToConsentPage(event) {
          let url = "{{ url_for('consent') }}?{{ query_string | safe }}";
          if ({{ experiment.start_experiment_in_popup_window | tojson }}) {
              popup = window.open(
            url,
            "Popup",
            "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no"
            + ",width={{config.window_width}}"
            + ",height={{config.window_height}}");
            event.target.setAttribute("disabled", "");
          } else{
            // Replace so Back from the timeline does not return to this splash.
            window.location.replace(url);
          }
        }
        {% if experiment.with_lucid_recruitment() %}
          proceedToConsentPage(null);
        {% else %}
          document.getElementById("begin-button").onclick = proceedToConsentPage;
        {% endif %}
    </script>
{% endblock %}