{% extends "Admin.html" %}


{% block titlearea %}

<div class="d-flex flex-wrap justify-content-between my-4">
    <h2 id="uproot-title" class="fw-semibold">
        {% translate %}Sessions{% endtranslate %}
        <a class="ms-2 text-body-tertiary link-underline-opacity-0" href="https://uproot.science/running/sessions/" target="_blank" title="{% translate %}Documentation{% endtranslate %}" aria-label="{% translate %}Documentation{% endtranslate %}"><i class="bi bi-book fs-5"></i></a>
    </h2>
    <div>
        <a class="btn btn-uproot my-1" href="new/">{% translate %}New session{% endtranslate %}</a>
    </div>
</div>

{% endblock titlearea %}


{% block main %}

{% if not deployment.PUBLIC_DEMO %}

<h3 class="mb-4">
    {% translate %}
    Active sessions
    {% endtranslate %}
</h3>
<div class="mb-4-5 uproot-pagination" id="sessions-active-container">
    <div>
        <span class="text-body-tertiary">{% translate %}None{% endtranslate %}.</span>
    </div>
</div>

<h3 class="mb-4 text-secondary">
    {% translate %}
    Inactive sessions
    {% endtranslate %}
</h3>
<div class="mb-4-5 opacity-50 uproot-pagination" id="sessions-inactive-container">
    <div>
        <span class="text-body-tertiary">{% translate %}None{% endtranslate %}.</span>
    </div>
</div>

<script>
    uproot.onStart(() => {
        const active = Object.values(uproot.vars.sessions).filter((s) => s.active);
        const inactive = Object.values(uproot.vars.sessions).filter((s) => !s.active);

        renderSessions(active, "sessions-active-container");
        renderSessions(inactive, "sessions-inactive-container");
        uproot.paginateBlocks();
    });
</script>

{% else %}

{% include "PublicDemo.html" %}

{% endif %}

{% endblock main %}