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

{% block title %}
{% translate %}
Please wait
{% endtranslate %}
{% endblock title %}


{% block main %}

<div class="progress hidden" id="wait-progress-parent">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="1" aria-label="{% translate %}Please wait{% endtranslate %}" id="wait-progress"></div>
</div>

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

<script>
    let grouploop;
    let proceeding = false;
    const waitPage = uproot.vars._uproot_internal.thisis;

    function proceed() {
        if (proceeding) {
            return;
        }

        proceeding = true;

        if (grouploop !== undefined) {
            window.clearInterval(grouploop);
        }

        uproot.submit(waitPage);
    }

    function updateBar(x) {
        I("wait-progress").style.width = `${Math.round(100 * x)}%`;
        I("wait-progress").ariaValueNow = x;
    }

    function showBar() {
        I("wait-progress-parent").classList.remove("hidden");
    }

    function update(x) {
        if (x[0] === "submit") {
            proceed();
        }

        updateBar(x[1]);
        showBar();
    }

    if (typeof stopHere === "undefined" || !stopHere) {
        uproot.onCustomEvent("Grouped", (event) => {
            proceed();
        });

        uproot.onReady(() => {
            uproot.invoke("please_group").then(update);

            grouploop = window.setInterval(() => {
                uproot.invoke("please_group").then(update);
            }, 2000);
        });

        window.setInterval(() => {
            uproot.hello();
        }, 5000);

        window.setInterval(uproot.reload, 60000);
    }
</script>

{% endblock main %}