<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{container}">
    <head>
        <title th:text="${collection.name}"></title>
    </head>

    <body>
        <main layout:fragment="content">
            <nav class="breadcrumbs mb-5">
                <a th:href="@{/}">Home</a>
                <span>&gt;</span>
                <a th:if="${edition != null && @permissionService.canEnrolForEdition(edition.id)}" th:href="@{/editions}">Catalog</a>
                <a th:unless="${edition != null && @permissionService.canEnrolForEdition(edition.id)}" th:href="@{/}">My Courses</a>
                <span>&gt;</span>
                <a th:href="@{/shared-edition/{id}(id=${collection.id})}" th:text="${collection.name}"></a>
            </nav>

            <div class="flex space-between align-center mb-5">
                <h1 class="font-800" th:text="${collection.name}"></h1>

                <div class="flex gap-3" th:if="${@permissionService.canManageSharedSessions(collection.id)}">
                    <button class="button" data-dialog="create-shared-session-dialog">Create shared session</button>
                </div>
            </div>
            <th:block th:replace="~{shared-edition/view/create-session-dialog :: overlay}"></th:block>

            <div class="tabs mb-5" role="tablist" th:with="page = ${param.page}">
                <button id="sessions-tab" role="tab" aria-controls="sessions" th:aria-selected="${page == null} or ${page?.toString() == 'sessions'}">
                    <span class="fa-solid fa-calendar"></span>
                    Sessions
                </button>
                <button id="editions-tab" role="tab" aria-controls="editions" th:aria-selected="${page?.toString() == 'editions'}">
                    <span class="fa-solid fa-graduation-cap"></span>
                    Editions
                </button>
                <button id="staff-tab" role="tab" aria-controls="staff" th:aria-selected="${page?.toString() == 'staff'}">
                    <span class="fa-solid fa-user"></span>
                    Staff
                </button>
            </div>

            <div id="sessions" th:hidden="${param.page != null} and ${param.page.toString() != 'sessions'}">
                <th:block th:replace="~{shared-edition/view/session-list :: tab}"></th:block>
            </div>

            <div id="editions" th:hidden="${param.page?.toString() != 'editions'}">
                <div class="flex vertical">
                    <table class="table" data-style="surface">
                        <tr class="table__header">
                            <th>Course edition</th>
                            <th>Course code</th>
                            <th>Teachers</th>
                        </tr>
                        <tr th:each="edition : ${editions}">
                            <td>
                                <a class="link" th:href="@{/edition/{id}(id=${edition.id})}" th:text="|${edition.course.name} - ${edition.name}|"></a>
                            </td>
                            <td th:text="${edition.course.code}"></td>
                            <td
                                th:with="teacher = ${editionTeachers[edition.id].toString()}"
                                th:text="${teacher.substring(1, teacher.length() - 1)}"></td>
                        </tr>
                    </table>
                </div>
            </div>

            <div id="staff" th:hidden="${param.page?.toString != 'staff'}">
                <div class="flex vertical">
                    <table class="table" data-style="surface">
                        <tr class="table__header">
                            <th>Name</th>
                            <th>Role</th>
                        </tr>
                        <tr th:each="entry : ${roles}" th:with="person = ${entry.key}, roles = ${entry.value}">
                            <td th:text="${person.displayName}"></td>
                            <td>
                                <ul class="list" role="list">
                                    <li
                                        th:each="r : ${roles}"
                                        th:text="|#{|role.${r.type.name().toLowerCase()}|} (${@editionCacheManager.getRequired(r.id.editionId).course.name})|"></li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </main>
    </body>
</html>
