<!--

    Queue - A Queueing system that can be used to handle labs in higher education
    Copyright (C) 2016-2020  Delft University of Technology

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
    <head></head>

    <!--@thymesVar id="notifications" type="java.util.List<nl.tudelft.queue.model.Notification>"-->
    <!--@thymesVar id="editions" type="java.util.List<nl.tudelft.labracore.api.dto.EditionDetailsDTO>"-->

    <!--@thymesVar id="message" type="java.lang.String"-->
    <!--@thymesVar id="active" type="java.lang.Long"-->

    <body>
        <section layout:fragment="content">
            <nav role="navigation" class="breadcrumbs">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Notifications</li>
                </ol>
            </nav>

            <div class="alert alert-info mt-md-3" role="alert" th:unless="${#strings.isEmpty(message)}">
                <span th:text="${message}"></span>
            </div>

            <div class="page-header">
                <div class="btn-toolbar float-right">
                    <div class="btn-group">
                        <a th:href="@{/notifications/clear}" class="btn btn-danger">Clear all notifications</a>
                    </div>
                </div>

                <h1>Notifications</h1>
            </div>

            <p th:if="${#lists.isEmpty(notifications)}">There are no notifications.</p>

            <div class="row" th:unless="${#lists.isEmpty(notifications)}">
                <div class="col-sm-3">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="nav-item">
                            <a href="#" class="nav-link" th:classappend="${active == null ? 'active' : ''}" th:href="@{/notifications}">
                                All notifications
                            </a>
                        </li>
                    </ul>
                    <hr />
                    <ul class="nav nav-pills nav-stacked small course-filter">
                        <li th:each="edition : ${editions}" class="nav-item">
                            <a
                                class="nav-link d-inline-block truncate"
                                style="max-width: 200px"
                                th:classappend="${edition.id == active ? 'active' : ''}"
                                th:href="@{/notifications/course/{id}(id=${edition.id})}">
                                <span class="count" th:text="${notifications.forCourse(course).unread()}"></span>
                                <div th:text="|${edition.course.name} (${edition.name})|"></div>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="col-sm-9">
                    <div class="list-group">
                        <a href="#" class="list-group-item item-icon" th:each="notification : ${notifications}" th:href="@{${notification.getUrl()}}">
                            <span class="icon unread" th:unless="${notification.read}"></span>
                            <h4 class="list-group-item-heading" th:text="${notification.title}"></h4>
                            <p class="list-group-item-text" th:text="${notification.message}"></p>
                            <p class="time" th:text="${notification.createdAt.toString()}"></p>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>
