<!--

    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="~{lab/enqueue}">
    <!--@thymesVar id="edition" type="nl.tudelft.labracore.api.dto.EditionDetailsDTO"-->

    <!--@thymesVar id="qSession" type="nl.tudelft.queue.model.labs.Lab"-->
    <!--@thymesVar id="request" type="nl.tudelft.queue.dto.create.requests.LabRequestCreateDTO"-->

    <!--@thymesVar id="rooms" type="java.util.List<nl.tudelft.labracore.api.dto.RoomSummaryDTO>"-->
    <!--@thymesVar id="assignments" type="java.util.List<nl.tudelft.labracore.api.dto.AssignmentSummaryDTO>"-->
    <!--@thymesVar id="types" type="java.util.Map<java.lang.Long, java.util.Set<java.lang.String>>"-->

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

    <body>
        <th:block th:obj="${request}">
            <th:block layout:fragment="enqueue-body">
                <div class="form-group">
                    <label for="input-assignment" class="col-sm-2 control-label">Assignment</label>

                    <div class="col-sm-8">
                        <select
                            class="selectpicker form-control"
                            th:classappend="${#fields.hasErrors('assignment')} ? 'is-invalid'"
                            id="input-assignment"
                            th:name="assignment"
                            data-title="Pick an assignment"
                            required>
                            <option th:value="${assignment.id}" th:text="${assignment.name}" selected></option>
                        </select>
                        <div class="invalid-feedback" th:if="${#fields.hasErrors('assignment')}" th:errors="*{assignment}">Assignment error</div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="input-type" class="col-sm-2 control-label">Type</label>

                    <div class="col-sm-8">
                        <select
                            class="selectpicker form-control"
                            id="input-type"
                            th:name="requestType"
                            th:classappend="${#fields.hasErrors('requestType')} ? 'is-invalid'"
                            data-title="Pick a type"
                            required>
                            <option th:value="QUESTION" selected>Question</option>
                        </select>
                        <div class="invalid-feedback" th:if="${#fields.hasErrors('requestType')}" th:errors="*{requestType}">Type error</div>
                    </div>
                </div>

                <div class="form-group" id="room-div">
                    <label for="input-room" class="col-sm-2 control-label">Room</label>

                    <div class="col-sm-8">
                        <select
                            class="selectpicker form-control"
                            id="input-room"
                            th:field="*{room}"
                            data-title="Pick a room"
                            th:classappend="${#fields.hasErrors('room')} ? 'is-invalid'"
                            required>
                            <option th:each="room : ${rooms}" th:value="${room.id}" th:text="${room.name}"></option>
                        </select>
                        <div class="invalid-feedback" th:if="${#fields.hasErrors('room')}" th:errors="*{room}">Room error</div>
                    </div>
                </div>

                <div class="form-group" id="question-div">
                    <label for="input-question" class="col-sm-2 control-label">Question</label>
                    <div class="col-sm-8">
                        <textarea
                            minlength="15"
                            maxlength="500"
                            class="form-control"
                            id="input-question"
                            name="question"
                            placeholder="Write your question here"
                            required
                            th:text="${question}"
                            onkeyup="countChar(this)"></textarea>
                        <div id="charCount">0/500</div>
                    </div>
                </div>

                <div id="image-holder" class="mb-3"></div>

                <div class="form-group">
                    <label for="input-comment" id="labelComment" class="col-sm-4 control-label">Help your TA find you!</label>

                    <div class="col-sm-8">
                        <textarea
                            maxlength="250"
                            th:classappend="${#fields.hasErrors('comment')} ? 'is-invalid'"
                            class="form-control"
                            id="input-comment"
                            th:field="*{comment}"
                            placeholder="You can use this field to specify a location within the room, e.g. your cubicle number."></textarea>

                        <div class="invalid-feedback" th:if="${#fields.hasErrors('comment')}" th:errors="*{comment}">Comment error</div>
                    </div>
                </div>

                <input name="doEnqueueExperimental" type="hidden" value="true" />

                <script src="/webjars/momentjs/min/moment.min.js"></script>
                <script src="/js/map_loader.js"></script>
            </th:block>
        </th:block>
    </body>
</html>
