<!--

    Queue - A Queueing system that can be used to handle labs in higher education
    Copyright (C) 2016-2024  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="confidentialAdvisorDto" type="nl.tudelft.queue.dto.create.reporting.ConfidentialAdvisorsReportDTO"-->
    <!--@thymesVar id="academicCounsellorDto" type="nl.tudelft.queue.dto.create.reporting.AcademicCounsellorReportDTO"-->
    <head>
        <title>Report an Incident</title>
    </head>
    <body>
        <main layout:fragment="content">
            <h1 class="font-800 mb-5">Report Incident</h1>

            <p class="mb-5">
                This page is intended to report unwanted and/or inappropriate behaviour. If something happened that made you feel unsafe or
                uncomfortable, do not hesitate to fill in the form below. Note that this page is not for giving feedback to a TA.
            </p>

            <div class="flex vertical">
                <div class="flex vertical gap-3">
                    <div class="flex vertical gap-1">
                        <label for="input-reportee" class="control-label">Person to report</label>
                        <select id="input-reportee" class="textfield" data-select>
                            <option th:each="person: ${usersInvolved}" th:value="${person.id}" th:text="${person.displayName}"></option>
                        </select>
                    </div>
                    <div class="flex vertical gap-1">
                        <label for="description" class="control-label">Description of incident</label>
                        <textarea
                            placeholder="Provide a description of what happened..."
                            id="description"
                            class="textfield"
                            required
                            aria-multiline="true"
                            rows="5"></textarea>
                    </div>
                </div>
                <div class="underlined"></div>
                <div class="grid gap-5 col-2 | sm:col-1">
                    <div class="surface flex">
                        <form
                            class="flex vertical align-start"
                            th:action="@{/report/submit/academic-counsellor}"
                            th:object="${academicCounsellorDto}"
                            method="post">
                            <input type="hidden" th:field="*{academicCounsellorEmail}" th:value="${academicCounsellorDto.academicCounsellorEmail}" />
                            <input type="hidden" name="reportedId" th:field="*{reportedId}" />
                            <input type="hidden" name="description" th:field="*{description}" />
                            <h4 class="font-400">Academic Counsellor</h4>
                            <p>
                                We will send this report to the academic counselor responsible for the study programme the request is related to (
                                <span th:text="${program.name}"></span>
                                ). The academic counselor may reach out to you to discuss if and how you would like to proceed.
                            </p>
                            <div th:if="${academicCounsellorDto.studyAssocMail != null}">
                                <!-- prettier-ignore -->
                                <p class="mb-3">Do you also want to send this report to the confidential mentors of the study association of this study programme (<span th:text="${program.name}"></span>)?</p>
                                <div>
                                    <input type="checkbox" id="study-association-trustee" th:field="*{mailToStudyAssoc}" />
                                    <label for="study-association-trustee">Send to study association</label>
                                </div>
                            </div>
                            <button class="button" style="margin-top: auto">Submit</button>
                        </form>
                    </div>
                    <div class="surface flex">
                        <form
                            class="flex vertical align-start"
                            th:action="@{/report/submit/confidential-advisor}"
                            th:object="${confidentialAdvisorDto}"
                            method="post">
                            <input type="hidden" name="reportedId" th:field="*{reportedId}" />
                            <input type="hidden" name="description" th:field="*{description}" />

                            <h4 class="font-400">Confidential Advisors</h4>
                            <p>
                                We will send your report to the confidential advisors of the TU Delft. Your incident can be reported to any of them,
                                whichever you feel most confident with. The confidential counselor may reach out to you to discuss if and how you
                                would like to proceed.
                                <!-- prettier-ignore -->
                                <span><a target="_blank" href="https://www.tudelft.nl/en/about-tu-delft/strategy/integrity-policy/confidential-advisors/the-team" class="link">More information about them can be found here</a>.</span>
                                In the dropdown below, you can select one name to get in contact with.
                            </p>
                            <div>
                                <label for="trusteeMail">Confidential advisor</label>
                                <select data-select id="trusteeMail" th:field="*{trusteeMail}" data-style="variant" required>
                                    <optgroup label="Academic Integrity">
                                        <option value="f.c.grozema@tudelft.nl">Ferdinand Grozema</option>
                                        <option value="D.L.Schott@tudelft.nl">Dingena Schott</option>
                                        <option value="W.S.J.Uijttewaal@tudelft.nl">Wim Uijttewaal</option>
                                    </optgroup>
                                    <optgroup label="Social & Organisational integrity">
                                        <option value="a.aghaee@tudelft.nl">Atefeh Aghaee</option>
                                        <option value="e.e.dongstra@tudelft.nl">Ella Dongstra</option>
                                        <option value="g.giardina@tudelft.nl">Giogia Giardina</option>
                                        <option value="a.vangulik@tudelft.nl">Ada van Gulik</option>
                                        <option value="h.g.leffers@tudelft.nl">Hanneke Leffers</option>
                                        <option value="c.mooiman@tudelft.nl">Christiaan Mooiman</option>
                                    </optgroup>
                                    <optgroup label="External">
                                        <option value="carin.vanderhor@bmwvoorelkaar.nl">Carin van der Hof</option>
                                    </optgroup>
                                </select>
                            </div>
                            <button class="button" style="margin-top: auto">Submit</button>
                        </form>
                    </div>
                </div>
                <script>
                    document.addEventListener(
                        "ComponentsLoaded",
                        () => {
                            document.getElementById("description").addEventListener("change", e => {
                                const desc = document.getElementById("description").value;
                                document.getElementsByName("description").forEach((el, key, parent) => {
                                    el.value = desc;
                                });
                            });
                            document.getElementById("input-reportee").addEventListener("change", e => {
                                const reported = document.getElementById("input-reportee").value;
                                document.getElementsByName("reportedId").forEach((el, key, parent) => {
                                    el.value = reported;
                                });
                            });
                        },
                        false
                    );
                </script>
            </div>
        </main>
    </body>
</html>
