<!--

    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 xmlns:th="http://www.thymeleaf.org">
    <head></head>
    <body>
        <th:block th:fragment="peopleTable">
            <table th:id="peopleTable" class="table" data-style="surface">
                <thead>
                    <tr th:if="${people != null}" class="table__header">
                        <th>Name</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Number</th>
                        <th class="fit-content"></th>
                    </tr>
                </thead>
                <tbody>
                    <th:block th:each="person : ${people}">
                        <tr>
                            <td th:text="${person.getDisplayName()}"></td>
                            <td th:text="${person.getUsername()}"></td>
                            <td th:text="${person.getEmail()}"></td>
                            <td th:text="${person.getNumber()}"></td>
                            <td class="fit-content">
                                <button class="button button p-less" th:data-username="${person.getUsername()}">Add</button>
                            </td>
                        </tr>
                    </th:block>
                </tbody>
            </table>
            <td colspan="5" th:if="${people != null && people.isEmpty()}">There were no results found for this identifier!</td>
            <script>
                document.addEventListener("DOMContentLoaded", () => {
                    document.querySelectorAll("[data-username]").forEach(button => button.addEventListener("click", () => {
                        const form = document.getElementById("createParticipantForm");
                        const typeInput = form.querySelector("select[name='type']");

                        if (typeInput.value === "") return;

                        form.querySelector("input[name='identifier']").value = username;
                        form.submit();
                    });
                });
            </script>
        </th:block>
    </body>
</html>
