{% extends "base/consent.html" %}

{% block body %}
    <div style="margin-top: 130px; text-align: -webkit-center;">
      <div style="max-width: max-content;">
        <div class="col-xs-2">
          <img id="adlogo" src="/static/images/logo.png" alt="PsyNet logo" style="width: 150px; float: left;">
        </div>
        {% if experiment.with_lucid_recruitment() %}
        <p style="clear: both; text-align: left;">
        {{ pgettext("browser_compatibility", "We are now going to test your browser for compatibility.") }}<br>
        {{ pgettext("browser_compatibility", "If your browser is not compatible we have to reject the survey.") }}
        </p>
        <p style="text-align: left;">
        {% set TERMINATION_TIME = experiment.recruiter.termination_time_in_min %}
        {% trans name="consent" %}You will also see one or more consent pages and have up to <strong>{{ TERMINATION_TIME }}</strong> to read and accept/reject them.{% endtrans %}

        </p>
        {% endif %}
        <p style="clear: both;">
          <h3 style="text-align: right;">
            {{ pgettext("concent", "To proceed, click the button below.") }}
          </h3>
          <button
            type="button"
            class="btn btn-primary btn-lg"
            id="consent"
            style="float: right;"
            onClick="start();">
            {{ gettext("Next") }}
          </button>
        </p>
      </div>
    </div>
{% endblock %}

{% block libs %}
    {{ super() }}
    <script src="/static/scripts/platform.min.js"></script>
{% endblock libs %}

{% block scripts %}
    {{ super() }}
    <script>
        start = function() {
            {% if experiment.var.show_abort_button %}
            if (window.opener !== null) {
                window.opener.enableAbortButton();
            }
            {% endif %}
            window.location='/start?{{query_string|safe}}';
        }

        isVersionAtLeast = function(x, comparison) {
            var xSplit = x.split(".").map(Number);
            var comparisonSplit = comparison.split(".").map(Number);
            for (var i = 0; i < comparisonSplit.length; i ++) {
                if (i < xSplit.length) {
                    // Both have version numbers at that specifity to compare
                    if (xSplit[i] > comparisonSplit[i]) {
                        return true;
                    } else if (xSplit[i] < comparisonSplit[i]) {
                        return false;
                    }
                } else {
                    if (comparisonSplit[i] > 0) {
                        return false;
                    }
                }
            }
            return true;
        }
        window.addEventListener("load", function() {
            console.log(platform.toString());
            var minBrowserVersion = "{{ experiment.var.min_browser_version }}";
            if (platform.name != "Chrome") {
                $("#consent").prop("disabled", true);
                $("#consent").append("(please reload in Chrome first)");
                alert(
                    "{{ pgettext("browser_compatibility", "It seems like you're using a different browser than Chrome") }} (" + platform.name + "). " +
                    "{{ pgettext("browser_compatibility", "This experiment only supports Chrome.") }} " +
                    "{{ pgettext("browser_compatibility", "If you're using a different browser, please reopen the same page in Chrome.") }}"
                )
            } else if (!isVersionAtLeast(platform.version, minBrowserVersion)) {
                $("#consent").prop("disabled", true);
                $("#consent").append("(please update browser first)");
                alert(
                    "{{ pgettext("browser_compatibility", "It seems like you're using an out-of-date version of Chrome ") }}"
                    + "(you're using " + platform.version + ". {{ pgettext("browser_compatibility", "This app requires at least: ") }}"
                    + minBrowserVersion + "). "
                    + "{{ pgettext("browser_compatibility", "Please update your browser and open this web page again.") }}"
                );
            }
        });
    </script>
{% endblock %}
