<!DOCTYPE html>
<html lang="fr" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="fragments.html :: head(#{recipe.add.title}, 'form')"></th:block>
</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="#{recipe.add.title}"></h1>

    <form th:action="@{/recipe/creator}" th:object="${recipe}" class="requireAuth" id="recipe-form" method="POST">
        <div class="content">
            <div class="formWrap">
                <div class="formColumn">
                    <div>
                        <label th:for="${#ids.next('name')}" th:text="#{recipe.color} + ':'"></label>
                    </div>
                    <div>
                        <label th:for="${#ids.next('company')}" th:text="#{keyword.company} + ':'"></label>
                    </div>
                    <div>
                        <label th:for="${#ids.next('description')}" th:text="#{recipe.description} + ':'"></label>
                    </div>
                    <div>
                        <label th:for="${#ids.next('sample')}" th:text="#{recipe.sample} + ':'"></label>
                    </div>
                    <div>
                        <label th:for="${#ids.next('approbationDate')}"
                               th:text="#{recipe.approbationDate} + ':'"></label>
                    </div>
                    <div>
                        <label th:for="${#ids.next('remark')}" th:text="#{recipe.remark} + ':'"></label>
                    </div>
                </div>
                <div class="formColumn">
                    <div>
                        <input type="text" th:field="*{name}" required/>
                    </div>
                    <div>
                        <select th:field="*{company}">
                            <option th:each="company : ${companies}" th:text="${company.name}"
                                    th:value="${company.id}"></option>
                        </select>
                    </div>
                    <div>
                        <input type="text" th:field="*{description}" required/>
                    </div>
                    <div>
                        <input type="number" th:field="*{sample}" required/>
                    </div>
                    <div>
                        <input type="date" th:field="*{approbationDate}"/>
                    </div>
                    <div>
                        <textarea cols="20" form="recipe-form" rows="2" th:field="*{remark}"></textarea>
                    </div>
                </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>

</body>
</html>
