{% extends "Base.html" %}
{% set buttons = False %}
{% set disable_auto_start = True %}

{% block title %}
{% if _uproot_internal.needlabel %}
{% translate %}
Welcome
{% endtranslate %}
{% else %}
{% translate %}
Please wait
{% endtranslate %}
{% endif %}
{% endblock title %}


{% block wrapper_content %}

<div id="uproot-main-container" class="container">
    {{ self.pre_main() }}

    {{ self.titlearea() }}

    <main id="uproot-main" tabindex="-1">
        {% if _uproot_errors %}
        {% for error in _uproot_errors %}
        <div class="alert alert-danger uproot-main-error" role="alert">
            {{ error }}
        </div>
        {% endfor %}
        {% endif %}

        {{ self.main() }}
        {{ self.main2() }}

        {% block main3 %}

{% include app_or_default(app, "RoomHelloInfo.html") ignore missing %}

{% if _uproot_internal.needlabel %}

{% if _uproot_internal.bad %}

<div class="alert alert-danger mb-4" role="alert">
    {% translate %}
    You provided invalid credentials.
    {% endtranslate %}
</div>

{% endif %}

<form method="post">
    <div class="mb-3">
        <label for="label" class="form-label">
            {% translate %}
            Please enter your Access Code.
            {% endtranslate %}
        </label>
        <input type="text" class="form-control form-control-lg font-monospace" id="label" name="label" maxlength="128" pattern="[A-Za-z0-9\-._]+" required>
    </div>

    <div class="d-grid">
        <button type="submit" class="btn btn-primary btn-lg">
            {% translate %}
            Submit
            {% endtranslate %}
        </button>
    </div>
</form>

<script>
    I("label").addEventListener("input", function () {
        const pos = this.selectionStart;
        const cleaned = this.value.replace(/[^A-Za-z0-9\-._]/g, "");
        if (cleaned !== this.value) {
            const removed = this.value.length - cleaned.length;
            this.value = cleaned;
            this.setSelectionRange(pos - removed, pos - removed);
        }
    });
</script>

{% else %}

<p>
    {% translate %}
    This page will advance automatically.
    {% endtranslate %}
</p>

<p>
    <b>
        {% translate %}
        Keep this page open and watch it at all times.
        {% endtranslate %}
    </b>
</p>

<form id="label-form" method="post">
    <input type="hidden" id="label" name="label">
</form>

<script>
    const label = uproot.vars._uproot_internal.label || "";
    const hasLabel = label !== "";

    uproot.wsurl = () => {
        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
        const host = window.location.host;
        const ui = uproot.vars._uproot_internal;

        return `${protocol}//${host}${ui.root}/roomws/${ui.roomname}/?label=${label}`;
    };

    function setLabelAndSubmit(event) {
        const label = event.detail.label;

        I("label").value = label;
        I("label-form").submit();
    }

    if (typeof stopHere === "undefined" || !stopHere) {
        uproot.onStart(() => {
            uproot.enableConnectionLostModal();
            uproot.wsstart();
        });

        uproot.onCustomEvent("RoomLabelProvided", (event) => {
            if (!hasLabel || label != event.detail.label) {
                setLabelAndSubmit(event);
            }
        });

        uproot.onCustomEvent("RoomStarted", setLabelAndSubmit);
    }
</script>

{% endif %}

        {% endblock main3 %}
    </main>

    {{ self.post_main() }}

    {% if show_testing %}
    {% include "DataHistory.html" %}
    {% endif %}
</div>

{% endblock wrapper_content %}