<!--

    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
                                    type="button"
                                    class="button p-less"
                                    th:data-username="${person.getUsername()}"
                                    onclick="addParticipant(this.getAttribute('data-username'))">
                                    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>
                function addParticipant(username) {
                    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>
