<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" th:content="${keywords}"/>
    <title>List of all persons</title>
    <style type="text/css">
        body {
            padding: 50px;
        }

        .persons {
            border: 1px solid steelblue;
            width: 300px;
            border-collapse: collapse;
        }

        .persons tr td, th {
            padding: 5px;
            border: 1px solid steelblue;
        }

        .persons td:last-child, td:first-child {
            width: 50px;
        }
    </style>
    <script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Persons:</h1>

<a href = "add.html" th:href = "@{/add}">Add new</a>
<table class="persons">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    $(function () {
        $.get('/api/persons').done(function (persons) {
            persons.forEach(function (person) {
                $('tbody').append(`
                    <tr>
                        <td>${person.id}</td>
                        <td>${person.name}</td>
                    </tr>
                `)
            });
        })
    });
</script>

</body>
</html>
