<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{default}">
<head>
</head>
<body>
    <div class="container" id="root-div" layout:fragment="content">
        <div class="content">
            <h1>Reader</h1>
            <a class="btn btn-success"
               th:href="@{/reader/edit}">
                <i class="fa-solid fa-plus"></i> Добавить
            </a>
            <div class="row table-responsive text-white">
                <table class="table mt-3 text-white">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">ReaderName</th>
                        <th scope="col">Password</th>
                        <th scope="col">Mangas</th>
                        <th scope="col"></th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr th:each="reader, iterator: ${readers}">
                            <td th:text="${reader.id}"/>
                            <td th:text="${reader.readerName}"/>
                            <td th:text="${reader.hashedPassword}"/>
                            <td>
                                <select className="form-select" aria-label="Default select example">
                                    <option th:each="manga, iterator: ${reader.mangas}" th:text="${manga.mangaName}"/>
                                </select>
                            </td>
                            <td style="width: 10%">
                                <div class="btn-group" role="group" aria-label="Basic example">
                                    <a class="btn btn-warning button-fixed button-sm"
                                       th:href="@{/reader/edit/{id}(id=${reader.id})}">
                                        <i class="fa fa-pencil" aria-hidden="true"></i> Изменить
                                    </a>
                                    <button type="button" class="btn btn-danger button-fixed button-sm"
                                            th:attr="onclick=|confirm('Удалить запись?') && document.getElementById('remove-${reader.id}').click()|">
                                        <i class="fa fa-trash" aria-hidden="true"></i> Удалить
                                    </button>
                                </div>
                                <form th:action="@{/reader/delete/{id}(id=${reader.id})}" method="post">
                                    <button th:id="'remove-' + ${reader.id}" type="submit" style="display: none">
                                        Удалить
                                    </button>
                                </form>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>