<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <body>
        <div th:fragment="tab" class="flex vertical">
            <div class="flex vertical gap-3">
                <h3 class="font-500">Current sessions</h3>
                <table class="table" data-style="surface">
                    <tr class="table__header">
                        <th>Name</th>
                        <th>From</th>
                        <th>To</th>
                        <th></th>
                    </tr>
                    <tbody th:replace="~{ :: table-body(${currentSessions})}"></tbody>
                </table>
            </div>

            <div class="flex vertical gap-3">
                <h3 class="font-500">Upcoming sessions</h3>
                <table class="table" data-style="surface">
                    <tr class="table__header">
                        <th>Name</th>
                        <th>From</th>
                        <th>To</th>
                        <th></th>
                    </tr>
                    <tbody th:replace="~{ :: table-body(${upComingSessions})}"></tbody>
                </table>
            </div>

            <div class="flex vertical gap-3">
                <h3 class="font-500">Past sessions</h3>
                <table class="table" data-style="surface">
                    <tr class="table__header">
                        <th>Name</th>
                        <th>From</th>
                        <th>To</th>
                        <th></th>
                    </tr>
                    <tbody th:replace="~{ :: table-body(${pastSessions})}"></tbody>
                </table>
            </div>

            <th:block th:replace="~{ :: remove-dialog(sess)(${currentSessions})}"></th:block>
            <th:block th:replace="~{ :: remove-dialog(${upComingSessions})}"></th:block>
            <th:block th:replace="~{ :: remove-dialog(${pastSessions})}"></th:block>
        </div>

        <th:block th:fragment="table-body(sess)">
            <th:block th:if="${sess.isEmpty()}">
                <tr>
                    <td>No sessions</td>
                </tr>
            </th:block>

            <th:block th:unless="${sess.isEmpty()}">
                <tr th:each="lab : ${sess}">
                    <td>
                        <a class="link" th:text="${lab.name}" th:href="@{/lab/{id}(id=${lab.id})}"></a>
                        <span th:if="${lab.isShared}" class="chip">Shared lab</span>
                    </td>

                    <td th:text="${#temporals.format(lab.slot.opensAt, 'dd MMMM yyyy HH:mm')}"></td>
                    <td>
                        <span th:text="${#temporals.format(lab.slot.closesAt, 'dd MMMM yyyy HH:mm')}"></span>
                    </td>
                    <td class="fit-content">
                        <div class="flex gap-3 justify-end" th:if="${@permissionService.canManageInAnyEdition(lab.associatedEditions)}">
                            <a th:href="@{/lab/{id}/edit(id=${lab.id})}" class="button p-min fa-solid fa-pencil" data-style="outlined"></a>
                            <a th:href="@{/lab/{labId}/copy(labId=${lab.id})}" class="button p-min fa-solid fa-copy" data-style="outlined"></a>
                            <button
                                class="button p-min fa-solid fa-trash"
                                data-style="outlined"
                                data-type="error"
                                th:data-dialog="'delete-session-modal-' + ${lab.id}"></button>
                        </div>
                    </td>
                </tr>
            </th:block>
        </th:block>

        <th:block th:fragment="remove-dialog(sess)">
            <dialog th:each="lab : ${sess}" th:id="'delete-session-modal-' + ${lab.id}" class="dialog">
                <form class="flex vertical p-7" th:action="@{/lab/{id}/remove(id=${lab.id})}" method="post">
                    <h3 class="font-500 underlined" th:text="'Delete Session #' + ${lab.id}"></h3>

                    <div>
                        <p class="mb-3" th:text="'You are about to delete session #' + ${lab.id} + '!'"></p>
                        <p>
                            <strong class="fw-500">WARNING:</strong>
                            Deleting labs that already have existing requests is generally not recommended, as it can cause adverse effects.
                            Therefore, please avoid deleting such labs whenever possible.
                        </p>
                    </div>

                    <div class="flex space-between">
                        <button type="button" data-cancel class="button p-less" data-style="outlined">Cancel</button>
                        <button type="submit" class="button p-less" data-type="error">Delete session</button>
                    </div>
                </form>
            </dialog>
        </th:block>
    </body>
</html>
