<!--

    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="~{container}">
    <!--@thymesVar id="edition" type="nl.tudelft.queue.dto.create.QueueEditionCreateDTO"-->

    <!--@thymesVar id="cohorts" type="java.util.List<nl.tudelft.labracore.api.dto.CohortSummaryDTO>"-->
    <!--@thymesVar id="courses" type="java.util.List<nl.tudelft.labracore.api.dto.CourseSummaryDTO>"-->

    <head>
        <script src="/webjars/momentjs/min/moment.min.js"></script>
    </head>

    <body>
        <main layout:fragment="content">
            <h1 class="font-800 mb-5">Create edition</h1>

            <form th:action="@{/edition/add}" th:object="${edition}" method="post" enctype="multipart/form-data">
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />

                <p class="mb-3" th:if="${#lists.isEmpty(courses)}">
                    You are not the manager of any course, please
                    <a class="link" th:href="@{/editions/request-course}">request a course first</a>
                    .
                </p>

                <p class="mb-3" th:unless="${#lists.isEmpty(courses)}">
                    Select the course under which you want to create a course edition. If your course is not in the list, or has a different code,
                    please
                    <a class="link" th:href="@{/editions/request-course}">request a course first</a>
                    .
                </p>

                <div class="flex gap-3 align-center mb-5">
                    <label for="course-select">Select the course:</label>
                    <select th:field="*{course}" id="course-select" class="textfield">
                        <option value="none" disabled selected>Select course</option>
                        <option th:each="course : ${courses}" th:value="${course.id}" th:text="|${course.name} (${course.code})|"></option>
                    </select>
                </div>

                <p class="mb-5">
                    <label for="edition-name">
                        Edition name: (please name this after the year/semester, so for instance Q1 20/21, this will be displayed in the course list
                        as "[COURSE NAME] (Q1 20/21)"
                    </label>
                    <input th:field="*{name}" type="text" id="edition-name" placeholder="Edition name" class="textfield mt-3" />
                </p>

                <p class="mb-3">
                    Pick a cohort that you will teach during this edition. If you cannot find a fitting cohort, please select one of the available
                    cohorts. This will not impact any functionality for a standard course edition.
                </p>

                <div class="flex gap-3 align-center mb-5">
                    <label for="cohort-select">Select the cohort:</label>
                    <select th:field="*{cohort}" id="cohort-select" class="textfield">
                        <option value="none" disabled selected>Select cohort</option>
                        <option th:each="cohort : ${cohorts}" th:value="${cohort.id}" th:text="${cohort.name}"></option>
                    </select>
                </div>

                <div id="date-input" class="flex mb-5">
                    <div id="opens-at-input" class="flex vertical gap-1">
                        <label for="slot-from">From</label>
                        <input id="slot-from" type="datetime-local" th:field="*{startDate}" class="textfield" required />
                        <div th:if="${#fields.hasErrors('startDate')}" th:errors="*{startDate}">Slot error</div>
                    </div>

                    <div id="closes-at-input" class="flex vertical gap-1">
                        <label for="slot-to">To</label>
                        <input id="slot-to" type="datetime-local" th:field="*{endDate}" class="textfield" required />
                        <div class="invalid-feedback" th:if="${#fields.hasErrors('endDate')}" th:errors="*{endDate}">Slot error</div>
                    </div>
                </div>

                <div>
                    <button type="submit" class="button">Create edition</button>
                </div>
            </form>
        </main>
    </body>
</html>
