<!DOCTYPE html>
<html lang="fr" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="fragments.html :: head(#{materialType.editor.title}, null)"></th:block>

    <style>
        table {
            margin: auto;
            text-align: left;
        }

        th, td {
            min-width: 100px;
        }
    </style>
</head>
<body>

<!-- Fragment de l'entête -->
<header th:include="fragments.html :: header(false)"></header>
<!-- Corps de la page -->
<section>
    <div th:include="fragments.html :: messages"></div>
    <h1 th:text="#{materialType.editor.title}"></h1>

    <table th:if="${!materialTypes.empty}">
        <tr>
            <th th:text="#{material.type}"></th>
            <th></th>
        </tr>
        <tr th:each="materialType : ${materialTypes}">
            <td class="materialType" th:data-materialTypeId="${materialType.id}"
                th:text="${materialType.name}"></td>
            <td>
                <button class="editor" th:data-materialTypeId="${materialType.id}" type="button"
                        th:text="#{keyword.edit}"></button>
            </td>
        </tr>
    </table>
    <!--    <b th:if="${materials.empty}" class="error" th:text="#{material.error.anyFound}"></b>-->
</section>
<!-- Fragment du pied de page -->
<footer th:include="fragments.html :: footer(null, true)"></footer>


<script>
    /*<![CDATA[*/
    (() => {
        $(".editor").on({
            click: function () {
                window.location.href = `/materialType/editor/${$(this).data("materialtypeid")}`;
            }
        });
    })();
    /*]]>*/
</script>
</body>
</html>
