<!--

    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="~{admin/view}">
    <!--@thymesVar id="room" type="nl.tudelft.ewi.queue.model.Room"-->

    <body>
        <section layout:fragment="subcontent">
            <ul class="surface list divided" role="list" th:with="roomsWithMaps = ${@adminService.roomsWithMaps}">
                <li class="pbl-3 flex align-center space-between" th:each="room : ${rooms}">
                    <span th:text="${room.name}"></span>
                    <div class="flex">
                        <a
                            th:if="${roomsWithMaps.contains(room.id)}"
                            th:data-room-id="${room.id}"
                            type="submit"
                            data-style="outlined"
                            class="button p-min"
                            target="_blank">
                            Download
                        </a>
                        <form class="flex" th:action="@{/admin/room/{id}(id=${room.id})}" method="post" enctype="multipart/form-data">
                            <input type="file" id="map" name="map" accept="image/*" />
                            <button type="submit" class="button p-min" data-style="outlined">Upload</button>
                        </form>
                    </div>
                </li>
            </ul>
            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    document.querySelectorAll("[data-room-id]").forEach(link => {
                        fetch(`/room/map/${link.dataset.roomId}`)
                            .then(res => res.json())
                            .then(file => link.setAttribute("href", `/maps/${file.fileName}`));
                    });
                });
            </script>
        </section>
    </body>
</html>
