<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <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;
        }

        h3 {
            background-image: url("../static/listmark.png");
            background-repeat: no-repeat;
            padding: 2px;
            padding-left: 30px;
        }

    </style>

    <style type="text/css" th:inline="text">
        [[h3]] {
            background-image: url([[@{/listmark.png}]]);
            background-repeat: no-repeat;
            padding: 2px;
            padding-left: 30px;
        }

    </style>
</head>
<body>

<h3 th:text="#{lang-switcher-header}">Select language</h3>
<div>
    <div><a href="#" th:href="@{/(lang=en)}" th:text="#{en-lang-switch-button-caption}">Language - EN</a></div>
    <div><a href="#" th:href="@{/(lang=ru)}" th:text="#{ru-lang-switch-button-caption}">Language - RU</a></div>
</div>

<h3 th:text="#{persons-table-header}">Persons:</h3>

<table class="persons">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="person : ${persons}">
        <td th:text="${person.id}">1</td>
        <td th:text="${person.name}">John Doe</td>
        <td>
            <a th:href="@{/edit(id=${person.id})}" href="edit.html" th:text="#{edit-button-caption}">Edit</a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
