{% extends "macros.html" %}
{% import "macros/browser-detect.html" as browser_detect with context %}
{% from "macros/early_exit.html" import early_exit_modal %}
{% from "macros/timeline-shell.html" import
    template_data_script,
    timeline_header,
    timeline_hold_region,
    timeline_footer
    with context %}

{% block stylesheets %}
    {# theme.html arrives via psynet_layout.html's stylesheets block. #}
    {{ super() }}

    {% if inplace_timeline_transitions %}
        <style>
            body.timeline-transition-pending #main-body {
                pointer-events: none;
                opacity: 0.6;
            }
        </style>
    {% endif %}

    <style>
        body.timeline-held #main-body {
            pointer-events: none;
        }

        /* The indicator floats over the page so that starting or ending a hold
           never reflows the participant's content. It clears the progress bar
           and sits inside the top margin of #main-body when unscrolled. */
        #timeline-hold-region {
            align-items: center;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            justify-content: center;
            left: 0;
            padding: 0 1rem;
            pointer-events: none;
            position: fixed;
            right: 0;
            top: {% if config.show_progress_bar %}1.5rem{% else %}0.5rem{% endif %};
            /* Below #early-exit-modal (1050) so Leave confirmation covers the
               wait chip. Leave stays clickable during a hold. */
            z-index: 1040;
        }

        #timeline-hold-region:empty {
            display: none;
        }

        #psynet-timeline-hold-indicator {
            align-items: center;
            background: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color);
            border-radius: 999px;
            box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
            color: var(--bs-body-color);
            display: flex;
            gap: 0.6rem;
            max-width: 100%;
            padding: 0.65rem 1rem;
            pointer-events: auto;
        }

        .psynet-timeline-hold-message {
            align-items: center;
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            line-height: 1.25;
            text-align: center;
        }

        .psynet-timeline-hold-progress {
            font-size: 0.85em;
            opacity: 0.8;
            text-align: center;
        }

        /* Partner-ready notices sit on the progress bar (or the top of the
           page when there is no bar). They do not reflow #main-body. */
        #timeline-header {
            position: relative;
            z-index: 1040;
        }

        #timeline-header:has(#psynet-arrival-notice) #timeline-progress-label {
            display: none;
        }

        #psynet-arrival-notice {
            background: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color);
            border-radius: 999px;
            box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.14);
            color: var(--bs-body-color);
            font-size: 0.95rem;
            font-weight: 500;
            left: 50%;
            line-height: 1.25;
            max-width: calc(100% - 1.5rem);
            overflow: hidden;
            padding: 0.55rem 1.1rem;
            pointer-events: auto;
            position: absolute;
            text-overflow: ellipsis;
            top: 0.2rem;
            transform: translateX(-50%);
            white-space: nowrap;
            z-index: 1;
        }

        @media (max-width: 720px) {
            #psynet-arrival-notice {
                font-size: 0.8rem;
                padding: 0.28rem 0.8rem;
            }

            #timeline-header:not(:has(.progress)) #psynet-arrival-notice {
                font-size: 0.75rem;
                padding: 0.12rem 0.7rem;
            }
        }
    </style>

    {% for x in css %}
        <style data-psynet-fragment-style="true">
            {{ x }}
        </style>
    {% endfor %}

    {% for x in css_links %}
        <link rel="stylesheet" href="{{ x }}" data-psynet-fragment-stylesheet="true">
    {% endfor %}
{% endblock %}

{% block body %}
    {% macro timeline_main_body() %}
        <div id="main-body" class="container psynet-surface" style="clear: both;"
             data-page-ready="false"
             data-expect-scrolling="{{ page.expect_scrolling | tojson }}">
            {% block main_body %}
                {{ media.media_container() }}
                {{ progress.trial_progress_display(trial_progress_display_config) }}
            {% endblock %}

            <span id="psynet-event-listener"></span>

            {% if partial_mode %}
                {# Architecture: docs/developer/page_lifecycle.rst #}
                {# In partial_mode we keep page-local assets and framework template
                   scripts in a hidden container for activation after the fragment swap. #}
                <div id="psynet-fragment-assets" style="display: none;">
                    <div id="psynet-page-css-links">
                        {% for x in css_links %}
                            <link rel="stylesheet" href="{{ x }}">
                        {% endfor %}
                    </div>
                    <div id="psynet-page-css">
                        {% for x in css %}
                            <style>
                                {{ x }}
                            </style>
                        {% endfor %}
                    </div>
                    <div id="psynet-embedded-scripts">
                        {# Framework child templates may provide internal scripts through
                           their scripts block. #}
                        {{ self.scripts() }}
                    </div>
                </div>
            {% endif %}
        </div>
    {% endmacro %}

    {% if partial_mode %}
        {# Fallback when this file is the template root. Child templates that
           extend timeline-page.html are rewritten to timeline-fragment.html. #}
        <div id="psynet-timeline-fragment">
            {{ timeline_header() }}
            {{ timeline_hold_region() }}
            {{ timeline_main_body() }}
            {{ timeline_footer() }}
            {% if early_exit_offer_id %}
                {{ early_exit_modal(
                    participant.assignment_id,
                    early_exit_offer_id,
                    early_exit_confirmation
                ) }}
            {% endif %}
            {{ template_data_script() }}
        </div>
    {% else %}
        {# Full-page render used for initial loads and for the legacy reload path.
           The browser-detect markup stays outside the fragment so that in-place
           transitions do not duplicate it. #}
        {{ browser_detect.body() }}
        <div id="timeline-root">
            {{ timeline_header() }}
            {{ timeline_hold_region() }}
            {{ timeline_main_body() }}

            {% block modals %}
                {% if early_exit_offer_id %}
                    {{ early_exit_modal(
                        participant.assignment_id,
                        early_exit_offer_id,
                        early_exit_confirmation
                    ) }}
                {% endif %}

                {% block comment_modal %}
                    {% if config.get("leave_comments_on_every_page") %}
                    <div id="comment-modal" class="modal">
                        <div class="modal-content">
                            <div><span class="close">&times;</span></div>
                            <h5>{{ pgettext("timeline_comment", "Leave a comment") }}</h5>
                            <textarea id="comment-text" class="form-control" placeholder='{{ pgettext("timeline_comment", "Write a comment here") }}'></textarea>
                            <button type="button" class="btn btn-primary mt-2"
                                    id="send-comment">{{ pgettext("timeline_comment", "Send comment") }}</button>
                        </div>
                    </div>
                    {% endif %}
                {% endblock %}

                {% block alert_modal %}
                    <div id="alert-modal" class="modal">
                        <div class="modal-content">
                            <h3 id="alert-message"></h3>
                            <button type="button" style="max-width: 100px" class="btn btn-primary" id="alert-button">
                                {{ pgettext("alert_ok", "OK") }}
                            </button>
                        </div>
                    </div>
                {% endblock %}

                {% block resume_modal %}
                    <div id="resume-modal" class="modal">
                        <div class="modal-content">
                            <h3>{{ pgettext("timeline_resume", "Are you ready?") }}</h3>
                            <p>
                                {{ pgettext("timeline_resume", "Click the button when you're ready to continue the experiment.") }}
                            </p>
                            <p>
                                {{ pgettext("timeline_resume", "Note: if you see this message a lot, it might be because your browser has an incompatible extension installed (e.g. adblocker). Please try opening this page in an incognito window instead (you can just copy and paste the URL from the current page), and/or try manually disabling your extensions.") }}
                            </p>
                            <button type="button" style="max-width: 100px" class="btn btn-primary" id="resume-button">
                                {{ pgettext("timeline_resume", "Resume") }}
                            </button>
                        </div>
                    </div>
                {% endblock %}
            {% endblock %}

            {{ timeline_footer() }}
        </div>
    {% endif %}

{% endblock %}

{% block head %}
    {{ super() }}

    <script src="{{ url_for('static', filename='scripts/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/JSZip/jszip.min.js') }}"></script>

    {% for src in js_dependencies %}
        {# Blocking tags preserve first-page script order. Failed loads are marked
           so the guarded loader can still reject missing js_dependencies. #}
        <script src="{{ src }}" onerror="this.setAttribute('data-psynet-load-failed','')"></script>
    {% endfor %}

    {% if not partial_mode %}
        {{ template_data_script() }}
    {% endif %}
    <script src="{{ url_for('static', filename='scripts/websocket-channel.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/psynet.js') }}"></script>

    {# Last in the head block: everything it emits is valid head content. #}
    {{ browser_detect.head() }}
{% endblock %}

{% block libs %}
    {{ super() }}
    <script src="{{ url_for('static', filename='scripts/platform.min.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/survey-jquery/survey-jquery.js') }}"></script>
{% endblock %}

{% block scripts %}
    {% if not partial_mode %}
        {{ super() }}

        <script>
            (async function () {
                try {
                    psynet.registerErrorHandler();
                    await psynet.activateManagedPageJavascript();
                    psynet.initLucidTermination();
                    psynet.initEarlyExitButton();
                    await psynet.initPage();
                    await psynet.finalizePageReady();
                } catch (error) {
                    await psynet.handleTimelineTransitionFailure(
                        error,
                        "This page could not be loaded. Please refresh the page and try again.",
                    );
                }
            })();
        </script>
    {% endif %}
{% endblock %}