{% extends "layout.html" %}

{% block stylesheets %}
    <style>
        body {
            padding:0px;
            margin: 0px;
            background-color: white;
            color: black;
            font-weight: 300;
            font-size: 13pt;
        }
        #adlogo {
            float: right;
            width: 140px;
            padding: 2px;
            border: none;
        }
        #container-not-an-ad {
            position: absolute;
            top: 0px; /* Header Height */
            bottom: 0px; /* Footer Height */
            left: 0px;
            right: 0px;
            padding: 100px;
            padding-top: 5%;
            border: 18px solid #f3f3f3;
            background: white;
        }
    </style>
{% endblock %}

{% block scripts %}
<script>
    function openwindow(event) {
        const consentURL = "{{ url_for('consent', _external=True) }}?{{ query_string | safe }}";

        popup = window.open(
            consentURL,
            'Popup',
            'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=1024,height=768'
        );
        event.target.setAttribute("disabled", "");
    }

    document.getElementById("begin-button").onclick = openwindow;
</script>
{% endblock %}

{% block body %}
    <div id="container-not-an-ad">
        <div id="ad">
            <div class="row">
                <div class="col-xs-2">
                    {% block lab_logo %}
                        <img id="adlogo" src="{{ url_for('static', filename='images/logo.png') }}" alt="Lab Logo" />
                    {% endblock %}
                </div>
                <div class="col-xs-10">
                    {% 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 %}

                    {% if assignmentid == "ASSIGNMENT_ID_NOT_AVAILABLE" %}
                        {% block no_assignment %}
                            <h1>Call for participants</h1>
                            <p>
                                The XXX Lab at XXXXX University is looking for online participants
                                for a brief psychology experiment. The only requirements
                                are that you are at least 18 years old and are a fluent English
                                speaker.  The task will take XXXXX minutes and will pay XXXXX.
                            </p>
                            <p>
                                Please click the "Accept HIT" button on the Amazon site
                                above to begin the task.
                            </p>
                        {% endblock no_assignment %}
                    {% else %}
                        {% block live %}
                            <h1>Thanks for accepting this HIT.</h1>
                            <p>
                                By clicking the following URL link, you will be taken to the experiment,
                                including complete instructions and an informed consent agreement.
                            </p>
                            <div class="alert alert-warning">
                                <b>Warning</b>: Please disable pop-up blockers before continuing.
                            </div>

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