{% extends "Admin.html" %}


{% block titlearea %}

<div class="d-flex flex-wrap justify-content-between my-4">
    <h2 id="uproot-title" class="fw-semibold">
        {% translate %}Rooms{% endtranslate %}
        <a class="ms-2 text-body-tertiary link-underline-opacity-0" href="https://uproot.science/running/rooms/" 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 room{% endtranslate %}</a>
    </div>
</div>

{% endblock titlearea %}


{% block main %}

{% if not deployment.PUBLIC_DEMO %}

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

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

{% else %}

{% include "PublicDemo.html" %}

{% endif %}

{% endblock main %}


{% block late %}

<script>
    uproot.onStart(() => {
        const allRooms = uproot.vars.rooms;
        const openRooms = {};
        const closedRooms = {};

        Object.entries(allRooms).forEach(([name, room]) => {
            if (room.open && (room.config || room.sname)) {
                openRooms[name] = room;
            } else {
                closedRooms[name] = room;
            }
        });

        renderRooms(openRooms, "open-rooms-container");
        renderRooms(closedRooms, "closed-rooms-container");
        uproot.paginateBlocks();
    });
</script>

{% endblock late %}