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

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

    <style>
        h1 {
            margin-bottom: 0;
        }

        th {
            padding: 15px;
        }

        td {
            padding: 0 20px;
        }

        .centerCell {
            border-left-color: #e6e6e6;
            border-left-style: solid;
            border-left-width: 2px;

            border-right-color: #e6e6e6;
            border-right-style: solid;
            border-right-width: 2px;
        }

        table {
            border-collapse: collapse;
            margin: 0px auto;
            text-align: center;
        }

        section {
            text-align: center;
        }

        .recipeDescription {
            max-width: 400px;
        }

        .unapproved {
            background-color: #fff0b3;
        }
    </style>
</head>
<body>
<section>
    <p class="error" th:text="${error}"></p>

    <div>
        <th:block th:if="${!recipes.empty}">
            <th:block th:each="company : ${recipes.keySet()}">
                <h1 class="companyTabTitle" th:data-companyName="${company.companyName}"
                    th:text="${company.companyName}"></h1>

                <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="gotoRecipe" th:data-recipeID="${recipe.recipeID}" type="button">
                                        Voir
                                    </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>
    </div>
</section>

<script src="/js/main.js"></script>
<script>
    (() => {
        document.querySelectorAll(".gotoRecipe").forEach(e => {
            e.addEventListener("click", () => {
                const recipeID = e.getAttribute("data-recipeID");

                document.location.href = "/recipe/explore/" + recipeID;
            });
        });

        document.querySelectorAll(".recipeRow").forEach(e => {
            const approbationDate = e.getAttribute("data-approbationDate");

            if (approbationDate === null) {
                e.classList.add("unapproved");
                e.title = "Cette recette n'est pas approuvée";
            }
        });
    })();
</script>
</body>
</html>
