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

    <link rel="stylesheet" href="/css/form.css">
</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="#{mix.add.subtitle(${recipe.name})}"></h1>
    <br/>
    <br/>

    <form th:action="@{/mix/creator}" class="requireAuth" method="POST">
        <!-- Information nécessaire à la création des mélanges -->
        <input id="recipeId" name="recipe" th:value="${recipe.id}" type="hidden"/>

        <div class="content">
            <div class="flexContent formWrap">
                <div class="formColumn">
                    <div>
                        <label for="mixType" th:text="#{mix.mixType} + ':'"></label>
                    </div>
                    <div>
                        <label for="materialType" th:text="#{material.type} + ':'"></label>
                    </div>
                </div>
                <div class="formColumn">
                    <div>
                        <input type="text" id="mixType"
                               name="mixTypeName"
                               placeholder="ex: Teinture"
                               required/>
                    </div>
                    <div>
                        <select name="materialType" id="materialType">
                            <option th:each="materialType : ${materialTypes}" th:value="${materialType.id}"
                                    th:text="${materialType.name}"></option>
                        </select></div>
                </div>
            </div>
            <div class="flexContent materialListWrap" style="margin: auto">
                <div class="mixMaterialListTitle">
                    <div class="positionButtons">
                    </div>
                    <div class="material">
                        <h3 th:text="#{keyword.material}"></h3>
                    </div>
                    <div class="quantity">
                        <h3 th:text="#{keyword.quantity}"></h3>
                    </div>
                    <div class="units">
                        <button type="button">+</button>
                    </div>
                    <div class="removeButton"></div>
                </div>
                <div class="mixMaterialList"></div>
            </div>
            <div th:include="fragments.html :: formEndButtons"></div>
        </div>
    </form>
</section>
<!-- Fragment du pied de page -->
<footer th:include="fragments.html :: footer(null, true)"></footer>

<script src="/js/mix.js"></script>
<script>
    /*<![CDATA[*/
    window.addEventListener("load", () => {
        // Récupère les matériaux sous forme JSON depuis le thymeleaf et le valide.
        const materialsText = "[[${materialsJson}]]";
        materials = JSON.parse(materialsText.replace(/&quot;/g, '"'));
        removeText = "[[#{keyword.remove}]]";
    });

    function init() {
        addMaterial();
    }

    /*]]*/
</script>
</body>
</html>
