<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Modifier un produit</title>

    <link href="/css/main.css" rel="stylesheet"/>

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

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

<section>
    <p class="error" th:text="${error}"></p>
    <p class="success" th:if="${materialCode != null}"
       th:text="'Le produit \'' + ${materialCode} + '\' a bien été sauvegardé.'"></b>
    </p>
    <h1>Modifier des produits</h1>

    <th:block th:if="${!materials.empty}">
        <table>
            <tr>
                <th>Produit</th>
                <th>Type</th>
            </tr>
            <th:block th:each="material : ${materials}">
                <tr>
                    <td class="materialCode" th:data-materialID="${material.materialID}"
                        th:text="${material.materialCode}"></td>
                    <td th:text="${material.materialType.materialTypeName}"></td>
                    <td>
                        <button class="editor" th:data-materialID="${material.materialID}" type="button">Modifier
                        </button>
                    </td>
                </tr>
            </th:block>
        </table>
    </th:block>
    <th:block th:if="${materials.empty}">
        <b class="error">Aucun produit n'a été trouvé</b>
    </th:block>
</section>

<script src="/js/main.js"></script>
<script>
    /*<![CDATA[*/
    (() => {
        document.querySelectorAll(".editor").forEach((e) => {
            e.addEventListener("click", () => {
                const materialID = e.getAttribute("data-materialID");

                document.location.href = "/material/editor/" + materialID;
            });
        });
    })();
    /*]]>*/
</script>
</body>
</html>