{% extends "Admin.html" %}


{% block title %}

{% translate %}
Room
{% endtranslate %}
<span class="font-monospace">{{ roomname }}</span>

{% endblock title %}


{% block head %}

<style>
/* Color visited links so that it is clear during debuggin which participat URL one has already opened */
.player-url:visited {
    color: var(--bs-uproot) !important;
}
</style>

{% endblock head %}


{% block main %}

{% if room.sname is none %}

<div class="gx-lg-4-5 row">
    <div class="col-12 col-lg-6 mb-4-5">
        <div class="border-uproot-light card h-100">
            <div class="bg-white border-0 card-header pb-1">
                <h4 class="border-bottom border-uproot-light fw-semibold mb-0 mt-2 pb-3">
                    {% translate %}Player URL{% endtranslate %}
                </h4>
            </div>
            <div class="card-body pb-2">
                <p>{% translate %}Players can use the following URL for entering this room{% endtranslate %}:</p>
                <ul>
                    <li>
                        <a class="ffa-disambiguation link-subtle player-url"
                           href="../../../room/{{ roomname }}/" target="_blank">{{ root }}/room/{{ roomname }}/</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6 mb-4-5">
        <div class="border-uproot-light card h-100">
            <div class="bg-white border-0 card-header pb-1">
                <h4 class="border-bottom border-uproot-light fw-semibold mb-0 mt-2 pb-3">
                    {% translate %}Labels{% endtranslate %}
                </h4>
            </div>
            <div class="card-body pb-2">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h5 class="mb-2">{% translate %}Recently seen{% endtranslate %}: <i>n</i>&nbsp;=&nbsp;<span class="n-here">0</span></h5>
                        <div id="recently-seen" class="font-monospace mb-4"></div>
                    </div>
                    <div class="col-md-6"
                         {% if not room.labels %}
                         hidden
                         {% endif %}
                         >
                         <h5 class="mb-2">{% translate %}Not recently seen{% endtranslate %}</h5>
                         <div id="not-recently-seen" class="font-monospace"></div>
                    </div>
                </div>
                {% if room.labels %}
                <p class="mb-4">
                <button class="btn btn-sm btn-outline-uproot" data-bs-target="#labelUrlModal" data-bs-toggle="modal" type="button">
                    {% translate %}Show individual URLs{% endtranslate %}
                </button>
                </p>
                {% endif %}
                <p class="mb-2 text-black-50">
                {% translate %}
                Determining which labels are “online” is not an exact science. Instead, uproot uses various heuristics and algorithms to make a best-effort guess at which labels were “recently seen.”
                {% endtranslate %}
                </p>
                <p class="text-black-50">
                {% translate %}
                Rooms without preset labels auto-assign random labels or use acceptable labels provided through <code>?label=mylabel42</code> in the room’s URL.
                {% endtranslate %}
                </p>
            </div>
        </div>
    </div>
</div>

<div class="border-uproot-light card mb-4-5">
    <div class="card-body d-flex flex-wrap align-items-center gap-3 py-3">
        <div>
            {% if room.open and room.config %}
            <span class="badge bg-success">{% translate %}Open{% endtranslate %}</span>
            {% elif room.open %}
            <span class="badge border border-warning text-warning">{% translate %}Open{% endtranslate %}</span>
            {% else %}
            <span class="badge border border-danger text-danger">{% translate %}Closed{% endtranslate %}</span>
            {% endif %}
        </div>
        <small class="text-body-secondary">
            {% if room.open and room.config %}
            {% translate %}This room is open and will auto-create a session when the first player joins.{% endtranslate %}
            {% elif room.open %}
            {% translate %}This room is open but has no config associated. Players will wait until a session is created manually.{% endtranslate %}
            {% else %}
            {% translate %}This room is closed. Players will wait until the room is opened or a session is created.{% endtranslate %}
            {% endif %}
        </small>
    </div>
</div>

<div class="border-uproot-light card h-100 mb-4-5">
    <div class="bg-white border-0 card-header pb-1">
        <h3 class="border-bottom border-uproot-light fw-semibold mb-0 mt-2 pb-3 text-uproot">
            {% translate %}New session{% endtranslate %}
        </h3>
    </div>
    <div class="card-body pb-3">
        <script>
            const defaultConfig = uproot.vars.room.config || "";
        </script>
        {% include "SessionCreate.html" %}
        <input type="hidden" name="assignees" id="assignees" value="">
        <div class="ps-1">
            <div class="form-check mt-3">
                <input class="form-check-input" type="checkbox" id="disable_growth" name="disable_growth" value="1" checked>
                <label for="disable_growth">{% translate %}Set room capacity to number of players{% endtranslate %}</label>
                <small class="d-block form-text pt-2">
                    {% translate %}
                    If this box is unchecked, the room’s capacity will not be changed. This means that new room entrants can grow the session.
                    {% endtranslate %}
                    {% if room.capacity is none %}
                    {% translate %}
                    This room’s capacity is infinite.
                    {% endtranslate %}
                    {% else %}
                    {% translate %}
                    This room’s capacity is {{ room.capacity }}.
                    {% endtranslate %}
                    {% endif %}
                </small>
            </div>
        </div>
        <button type="button" class="btn btn-uproot mt-4" onclick="createSession()">Create session</button>
    </div>
</div>

<p>
    <button class="btn btn-outline-uproot" type="button" data-bs-toggle="collapse" data-bs-target="#room-settings-collapse" aria-expanded="false" aria-controls="room-settings-collapse">
        {% translate %}Room settings{% endtranslate %}
    </button>
</p>
<div class="collapse mb-4-5" id="room-settings-collapse">
    <div class="border-uproot-light card h-100">
        <div class="card-body pb-3">
            {% set editing = true %}
            {% include "RoomSettingsForm.html" %}

            <div class="d-flex gap-2 mt-4">
                <button type="button" class="btn btn-uproot" onclick="saveRoomSettings()">{% translate %}Save settings{% endtranslate %}</button>
                <button type="button" class="btn btn-outline-danger" onclick="deleteRoom()">{% translate %}Delete room{% endtranslate %}</button>
            </div>
        </div>
    </div>
</div>

<script>
    const expectedLabels = uproot.vars.room.labels || [];
    const recent = 20;

    let seen = uproot.vars.online;
    let currentRecentLabels = [];

    function preSubmit() {
        I("assignees").value = JSON.stringify(currentRecentLabels);

        return true; // can add further checks here
    }

    function createTooltip(element, time) {
        try {
            if (window.bootstrap?.Tooltip) {
                return new window.bootstrap.Tooltip(element, { title: time, placement: "top" });
            } else {
                element.setAttribute("title", time);
                return null;
            }
        } catch {
            element.setAttribute("title", time);
            return null;
        }
    }

    function updateUI() {
        const now = Date.now() / 1000;
        const recentlySeenDiv = document.getElementById("recently-seen");
        const notRecentlySeenDiv = document.getElementById("not-recently-seen");

        const recentLabels = uproot.sort(Object.keys(seen)
            .filter(label => now - seen[label] <= recent));

        [...document.querySelectorAll(".n-here")].forEach((el) => el.textContent = recentLabels.length);

        if (JSON.stringify(recentLabels) !== JSON.stringify(currentRecentLabels)) {
            recentlySeenDiv.querySelectorAll(".badge").forEach(element => {
                const tooltip = window.bootstrap?.Tooltip?.getInstance(element);
                if (tooltip) tooltip.dispose();
            });

            recentlySeenDiv.innerHTML = /* SAFE */ recentLabels
                .map(label => `<span class="badge bg-success me-1" data-label="${label}">${uproot.escape(label)}</span>`)
                .join("");

            recentlySeenDiv.querySelectorAll(".badge").forEach(element => {
                const label = element.getAttribute("data-label");
                const time = new Date(seen[label]).toLocaleTimeString();
                createTooltip(element, time);
            });

            currentRecentLabels = recentLabels;
        } else {
            recentlySeenDiv.querySelectorAll(".badge").forEach(element => {
                const label = element.getAttribute("data-label");
                const time = new Date(1000 * seen[label]).toLocaleTimeString();
                const tooltip = window.bootstrap?.Tooltip?.getInstance(element);
                if (tooltip) {
                    tooltip.setContent({ ".tooltip-inner": time });
                }
            });
        }

        const notRecentLabels = uproot.sort(expectedLabels
            .filter(label => !recentLabels.includes(label)));

        notRecentlySeenDiv.innerHTML = /* SAFE */ notRecentLabels
            .map(label => `<span class="badge bg-secondary me-1">${uproot.escape(label)}</span>`)
            .join("");
    }

    function cleanupOld() {
        const now = Date.now() / 1000;
        Object.keys(seen).forEach(label => {
            if (now - seen[label] > recent) {
                delete seen[label];
            }
        });
        updateUI();
    }

    uproot.onStart(() => {
        updateUI();

        uproot.subscribe("subscribe_to_attendance", `^${uproot.vars.roomname}`);
        uproot.subscribe("subscribe_to_room", uproot.vars.roomname);
        setInterval(cleanupOld, 1000);

        document.querySelector("label[for='nplayers']").innerHTML += /* SAFE */ " (<b>#n# recently seen</b>)".replace("#n#", "<span class='n-here'>0</span>");
    });

    uproot.onCustomEvent("RoomStarted", () => {
        uproot.reload();
    });

    uproot.onCustomEvent("Attended", (event) => {
        const label = event?.detail?.uname;
        if (!label) return;

        if (event?.detail?.online !== null) {
            seen[label] = Date.now() / 1000;
        }
        else {
            delete seen[label];
        }

        updateUI();
    });

    uproot.onStart(() => {
        const select = renderConfigsApps(uproot.vars.configs, "room-config-select");
        // Give this select a unique name to avoid conflict with SessionCreate’s config select
        select.name = "config";
        select.id = "room-config-select-input";

        const roomConfig = uproot.vars.room.config || "";
        const useConfigCheckbox = I("use_config");

        if (roomConfig) {
            const option = select.querySelector(`option[value="${roomConfig}"]`);
            if (option) {
                option.selected = true;
            }
            select.disabled = false;
            if (useConfigCheckbox) useConfigCheckbox.checked = true;
        } else {
            // No config - disable the select and uncheck the checkbox
            select.disabled = true;
            if (useConfigCheckbox) useConfigCheckbox.checked = false;
        }
    });

    function saveRoomSettings() {
        let labelsValid = true, snameValid = true;

        const labelsValue = I("labels").value.trim();
        if (labelsValue) {
            const labels = labelsValue.split("\n").map((a) => a.trim()).filter(l => l.length > 0);
            labelsValid = labels.every(label => label.length <= 128);
        }

        // Validate session name if entered
        const snameValue = I("room-sname").value.trim();
        if (snameValue) {
            snameValid = uproot.vars.sessions_available.includes(snameValue);
        }

        if (!labelsValid) {
            uproot.error(_("One or more labels exceed the maximum length of 128 characters."));
        }
        else if (!snameValid) {
            uproot.error(_("The session you entered does not exist."));
        }
        else {
            // Disable the SessionCreate config select to prevent it from being submitted
            const createSessionSelect = I("configs-apps-select");
            if (createSessionSelect) createSessionSelect.disabled = true;

            // Disable room settings config select if not using config
            if (!I("use_config").checked) {
                I("room-config-select-input").disabled = true;
                I("open").checked = false;
            } else {
                I("room-config-select-input").disabled = false;
            }
            const form = I("uproot-form");
            form.action = "settings/";
            form.submit();
        }
    }

    function deleteRoom() {
        uproot.invoke("delete_room", uproot.vars.roomname).then(() => {
            window.location.href = "../../rooms/";
        });
    }

</script>

{% else %}  {# room.sname is not none #}

<div class="gx-lg-4-5 row">
    <div class="col-12 col-lg-6 mb-4-5">
        <div class="border-uproot-light card h-100">
            <div class="bg-white border-0 card-header pb-1">
                <h4 class="border-bottom border-uproot-light fw-semibold mb-0 mt-2 pb-3">
                    {% translate %}Existing session{% endtranslate %}
                </h4>
            </div>
            <div class="card-body">
                <p class="mb-2">
                    {% translate %}This room is associated with the following session{% endtranslate %}:
                </p>
                <p class="fs-4">
                    <a class="font-monospace link-subtle" href="../../session/{{ room.sname }}/">{{ room.sname }}</a>
                </p>
                <p class="mb-0">
                    <a class="link-offset-2 link-underline-opacity-0 link-uproot small" data-bs-toggle="collapse" href="#advancedActionsSession" role="button" aria-expanded="false" aria-controls="advancedActionsSession">
                        {% translate %}Actions{% endtranslate %} <i class="bi bi-chevron-down"></i>
                    </a>
                </p>
                <div class="collapse" id="advancedActionsSession">
                    <p class="my-2">
                        <button type="button" class="btn btn-danger btn-sm" onclick="disassociate()">{% translate %}Disassociate room and session{% endtranslate %}</button>
                    </p>
                    <p class="mb-0">
                        <button type="button" class="btn btn-danger btn-sm" onclick="closeRoom()">{% translate %}Disassociate &amp; close room{% endtranslate %}</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6 mb-4-5">
        <div class="border-uproot-light card h-100">
            <div class="bg-white border-0 card-header pb-1">
                <h4 class="border-bottom border-uproot-light fw-semibold mb-0 mt-2 pb-3">
                    {% translate %}Associated config{% endtranslate %}
                </h4>
            </div>
            <div class="card-body">
                {% if room.config %}
                <p class="mb-2">
                {% translate %}This room is associated with the following config{% endtranslate %}:
                </p>
                <p class="font-monospace fs-4">
                {{ room.config }}
                </p>
                <h6 class="fw-semibold">{% translate %}Apps{% endtranslate %}</h6>
                <p class="font-monospace mb-1">
                {{ " → ".join(session_apps) }}
                </p>
                {% else %}
                <p class="mb-0 text-body-tertiary">
                    {% translate %}This room is not associated with a particular config{% endtranslate %}.
                </p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="gx-lg-4-5 row">
    <div class="col-12 col-lg-6 mb-4-5">
        <div class="border-uproot-light card h-100">
            <div class="bg-white border-0 card-header pb-1">
                <h4 class="border-bottom border-uproot-light fw-semibold mb-0 mt-2 pb-3">{% translate %}Player URL{% endtranslate %}</h4>
            </div>
            <div class="card-body pb-2">
                <p>{% translate %}Players can use the following URL for entering this room{% endtranslate %}:</p>
                <ul>
                    <li>
                        <a class="ffa-disambiguation link-subtle player-url"
                           href="../../../room/{{ roomname }}/" target="_blank">{{ root }}/room/{{ roomname }}/</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6 mb-4-5">
        <div class="border-uproot-light card h-100">
            <div class="bg-white border-0 card-header pb-1">
                <h4 class="border-bottom border-uproot-light fw-semibold mb-0 mt-2 pb-3">
                    {% translate %}Associated labels{% endtranslate %}
                </h4>
            </div>
            <div class="card-body">
                {% if room.labels %}
                <p class="mb-2">
                {% translate %}This room is associated with the following labels{% endtranslate %}:
                </p>
                <p class="font-monospace">
                {% for label in room.labels %}
                {{ label }}{% if not loop.last %}<span class="text-body-tertiary"> |</span>{% endif %}
                {% endfor %}
                </p>
                <p class="mb-1">
                <button class="btn btn-sm btn-outline-uproot" data-bs-target="#labelUrlModal" data-bs-toggle="modal" type="button">
                    {% translate %}Show individual URLs{% endtranslate %}
                </button>
                </p>
                {% else %}
                <p class="mb-0 text-body-tertiary">
                    {% translate %}This room is not associated with any labels{% endtranslate %}.
                </p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="gx-lg-4-5 row">
    <div class="col-12 col-lg-6 mb-4-5">
        <div class="border-uproot-light card h-100">
            <div class="bg-white border-0 card-header pb-1">
                <h4 class="border-bottom border-uproot-light fw-semibold mb-0 mt-2 pb-3">
                    {% translate %}Room status{% endtranslate %}
                </h4>
            </div>
            <div class="card-body">
                <div class="d-table mb-3">
                    <div class="d-table-row">
                        <span class="d-table-cell pe-4 text-body-secondary">{% translate %}Status{% endtranslate %}</span>
                        <span class="d-table-cell">
                            {% if room.open %}
                            <span class="badge bg-success">{% translate %}Open{% endtranslate %}</span>
                            {% else %}
                            <span class="badge border border-danger text-danger">{% translate %}Closed{% endtranslate %}</span>
                            {% endif %}
                        </span>
                    </div>
                    <div class="d-table-row">
                        <span class="d-table-cell pe-4 text-body-secondary">{% translate %}Players{% endtranslate %}</span>
                        <span class="d-table-cell">
                            {{ n_players }}&thinsp;/&thinsp;{% if room.capacity is not none %}{{ room.capacity }}{% else %}&infin;{% endif %}
                        </span>
                    </div>
                    <div class="d-table-row">
                        <span class="d-table-cell pe-4 text-body-secondary">{% translate %}Join mode{% endtranslate %}</span>
                        <span class="d-table-cell">
                            {% if room.labels is none and room.capacity is none %}
                            {% translate %}Free join{% endtranslate %}
                            {% else %}
                            {% translate %}Restricted{% endtranslate %}
                            {% endif %}
                        </span>
                    </div>
                </div>
                <p class="mb-0">
                    <a class="link-offset-2 link-underline-opacity-0 link-uproot small" data-bs-toggle="collapse" href="#advancedActionsRoom" role="button" aria-expanded="false" aria-controls="advancedActionsRoom">
                        {% translate %}Actions{% endtranslate %} <i class="bi bi-chevron-down"></i>
                    </a>
                </p>
                <div class="collapse" id="advancedActionsRoom">
                    <div class="d-table mt-2">
                        {% if room.open %}
                        <span class="d-table-cell pe-3">
                            <button type="button" class="btn btn-danger btn-sm" onclick="setRoomOpen(false)">
                                {% translate %}Close room{% endtranslate %}
                            </button>
                        </span>
                        <span class="d-table-cell small text-body-secondary">
                            {% translate %}Stop accepting new participants while keeping the session active.{% endtranslate %}
                        </span>
                        {% else %}
                        <span class="d-table-cell pe-3">
                            <button type="button" class="btn btn-outline-success btn-sm" onclick="setRoomOpen(true)">
                                {% translate %}Reopen room{% endtranslate %}
                            </button>
                        </span>
                        <span class="d-table-cell small text-body-secondary">
                            {% translate %}Resume accepting new participants into the existing session.{% endtranslate %}
                        </span>
                        {% endif %}
                    </div>
                    <div class="d-flex align-items-center gap-2 mt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="use_live_capacity"
                                {% if room.capacity is not none %}checked{% endif %}
                                onchange="I('live-capacity').disabled = !this.checked;">
                            <label class="form-check-label" for="use_live_capacity">
                                {% translate %}Limit capacity{% endtranslate %}
                            </label>
                        </div>
                        <input type="number" class="form-control form-control-sm" id="live-capacity"
                            style="width: 6rem;" min="1"
                            {% if room.capacity is not none %}value="{{ room.capacity }}"{% endif %}
                            {% if room.capacity is none %}disabled{% endif %}>
                        <button type="button" class="btn btn-outline-uproot btn-sm" onclick="setRoomCapacity()">
                            {% translate %}Set{% endtranslate %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6 mb-4-5">
        <div class="border-uproot-light card h-100">
            <div class="bg-white border-0 card-header pb-1">
                <h4 class="border-bottom border-uproot-light fw-semibold mb-0 mt-2 pb-3">
                    {% translate %}Room settings{% endtranslate %}
                </h4>
            </div>
            <div class="card-body">
                <p class="text-body-tertiary mb-0">
                    {% translate %}To edit room settings, first disassociate the session from this room.{% endtranslate %}
                </p>
            </div>
        </div>
    </div>
</div>

<script>
    function disassociate() {
        uproot.invoke("disassociate", uproot.vars.room.name, uproot.vars.room.sname).then(() => {
            uproot.reload();
        });
    }

    function closeRoom() {
        uproot.invoke("close_room", uproot.vars.room.name, true).then(() => {
            uproot.reload();
        });
    }

    function setRoomOpen(open) {
        uproot.invoke("set_room_open", uproot.vars.room.name, open).then(() => {
            uproot.reload();
        });
    }

    function setRoomCapacity() {
        const checkbox = I("use_live_capacity");
        const input = I("live-capacity");
        let capacity = null;

        if (checkbox.checked) {
            capacity = parseInt(input.value, 10);
            if (isNaN(capacity) || capacity < 1) {
                uproot.error(_("Capacity must be at least 1."));
                return;
            }
        }

        uproot.invoke("set_room_capacity", uproot.vars.room.name, capacity).then(() => {
            uproot.reload();
        });
    }
</script>

{% endif %}

<!-- Modal for label URLs -->
{% if room.labels %}
<div class="modal fade" id="labelUrlModal" tabindex="-1" aria-labelledby="labelUrlModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="border-uproot-light modal-content">
            <div class="border-uproot-light modal-header">
                <h5 class="modal-title" id="labelUrlModalLabel">
                    {% translate %}Individual label URLs{% endtranslate %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-sm table-hover">
                    <thead>
                        <tr>
                            <th class="fw-semibold ps-0">{% translate %}Label{% endtranslate %}</th>
                            <th class="fw-semibold">{% translate %}URL{% endtranslate %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for label in room.labels %}
                        <tr>
                            <td class="font-monospace ps-0">{{ label }}</td>
                            <td>
                                <a class="link-subtle player-url" href="../../../room/{{ roomname }}/?label={{ label }}" target="_blank"><span x-text="window.location.origin"></span>{{ root }}/room/{{ roomname }}/?label={{ label }}</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="border-uproot-light modal-footer justify-content-between">
                <button class="btn btn-outline-uproot btn-sm" onclick="copyLabelURLsToClipboard()" type="button">{% translate %}Copy URLs as plain text{% endtranslate %}</button>
                <span class="fw-300 invisible me-3 text-uproot" id="label-urls-copied">{% translate %}URLs copied to clipboard{% endtranslate %}.</span>
            </div>
        </div>
    </div>
</div>

<script>
    function copyLabelURLsToClipboard() {
        const labels = uproot.vars.room.labels;
        const text = labels
            .map(label => `${window.location.origin}${uproot.vars.root}/room/${uproot.vars.roomname}/?label=${label}`)
            .join("\n");

        navigator.clipboard.writeText(text);
        I("label-urls-copied").classList.remove("invisible");
        setTimeout(() => I("label-urls-copied").classList.add("invisible"), 3000);
    }
</script>
{% endif %}

{% endblock main %}