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

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

    <style>
        table {
            margin: auto;
        }

        th {
            padding-right: 50px;
        }

        td {
            text-align: left;
        }
    </style>
</head>
<body>

<section>
    <p class="error" th:text="${error}"></p>
    <p class="success" th:if="${recipeCode != null}"
       th:text="'La recette pour la couleur ' + ${recipeCode} + ' a bien été supprimée.'"></p>

    <h1>Supprimer une recette</h1>
    <form action="/recipe/remover/" class="requireAuth-remover" method="POST">
        <th:block th:if="${!recipes.empty}">
            <th:block th:each="company : ${recipes.keySet()}">
                <h2 class="companyTabTitle" th:data-companyName="${company.companyName}"
                    th:text="${company.companyName}"></h2>

                <th:block th:if="${!recipes.get(company).empty}">
                    <table style="display:none" th:id="'recipes_' + ${company.companyName}">
                        <tr>
                            <th>Couleur</th>
                            <th>Description</th>
                            <th>Échantillon</th>
                        </tr>
                        <th:block th:each="recipe : ${recipes.get(company)}">
                            <tr class="recipeRow" th:data-approbationDate="${recipe.approbationDate}">
                                <td th:text="${recipe.recipeCode}"></td>
                                <td class="centerCell recipeDescription" th:text="${recipe.recipeDescription}"></td>
                                <td class="centerCell" th:text="${recipe.sample}"></td>
                                <td>
                                    <button class="remover" th:data-code="${recipe.recipeCode}"
                                            th:data-recipeID="${recipe.recipeID}" type="button">
                                        Supprimer
                                    </button>
                                </td>
                            </tr>
                        </th:block>
                    </table>
                </th:block>
            </th:block>
        </th:block>
        <th:block th:if="${recipes.empty}">
            <b class="error">Aucune bannière n'a été trouvée.</b>
        </th:block>
    </form>
</section>

<script src="/js/main.js"></script>
</body>
</html>
