{% extends "psynet_layout.html" %}

{% block title %}{{ pgettext("error", "An error occurred") }}{% endblock %}

{% block body %}
    <div class="container my-5 psynet-surface">
        <div>
            {# The placeholder stays hidden until theme.html swaps in the themed logos,
               otherwise the browser paints the raw PNG first and then replaces it. #}
            <div class="row overflow-hidden mb-3" style="height: 73px;">
                <img id="adlogo" style="display: none" alt="Lab Logo" />
            </div>
            <h1 id="header">{{ pgettext("error", "An error occurred") }}</h1>
            <hr>
            <div>
                {% if error_text %}
                    <p id="error-text">{{ error_text }}</p>
                {% endif %}
                {% if error_page_presentation %}
                    {# The explanation is already in this document. Show it
                       immediately. Hide only the action until JS attaches
                       handlers. The spinner is for the later Submit or
                       redirect wait, not for first paint. #}
                    <div id="automatic-early-exit"
                         data-assignment-id="{{ assignment_id }}"
                         data-offer-id="{{ automatic_exit_offer_id or '' }}"
                         data-preparation-post-url="{{ error_page_presentation.preparation_post_url or '' }}"
                         data-preparation-post-data='{{ error_page_presentation.preparation_post_data | tojson }}'
                         data-action-post-url="{{ error_page_presentation.action_post_url or '' }}"
                         data-action-post-data='{{ error_page_presentation.action_post_data | tojson }}'
                         data-destination-url="{{ error_page_presentation.destination_url or '' }}"
                         data-auto-redirect-delay-ms="{{ error_page_presentation.auto_redirect_delay_ms or '' }}"
                         aria-live="polite">
                        <div id="automatic-early-exit-ready">
                            {% if error_page_presentation.message %}
                                <p>{{ error_page_presentation.message }}</p>
                            {% endif %}
                            {% if error_page_presentation.action_instruction %}
                                <p>{{ error_page_presentation.action_instruction }}</p>
                            {% endif %}
                        </div>
                        <div id="automatic-early-exit-pending" hidden role="status">
                            <span class="spinner-border" aria-hidden="true"></span>
                            <span>{{ pgettext("early_exit_error", "Please wait.") }}</span>
                        </div>
                        <p id="automatic-early-exit-failure" hidden>
                            {{ error_page_presentation.failure_message or '' }}
                        </p>
                        <button type="button"
                                id="automatic-early-exit-retry"
                                class="btn btn-primary btn-lg"
                                hidden>
                            {{ pgettext("early_exit_error", "Try again") }}
                        </button>
                        {% if error_page_presentation.button_label %}
                            <button type="button"
                                    id="automatic-early-exit-continue"
                                    class="btn btn-primary btn-lg"
                                    hidden>
                                {{ error_page_presentation.button_label }}
                            </button>
                        {% endif %}
                    </div>
                    <script>
                        document.addEventListener("DOMContentLoaded", function () {
                            window.psynetEarlyExit.init();
                        });
                    </script>
                    {% if error_page_presentation.researcher_contact_message %}
                        <p id="error-contact" class="mt-4">
                            {{ error_page_presentation.researcher_contact_message }}
                        </p>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}