<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Ajout d'une recette</title>

    <link href="/css/main.css" rel="stylesheet"/>
    <link href="/css/forms.css" rel="stylesheet"/>
</head>
<body>
<section>
    <p class="error" th:text="${error}"></p>

    <h1>Ajout d'une recette</h1>
    <div class="form">
        <form action="/recipe/creator" class="requireAuth" id="recipe-form" method="POST">
            <table>
                <tr>
                    <td><label for="recipeCode">Couleur: </label></td>
                    <td><input id="recipeCode" name="recipeCode" required type="text"/></td>
                </tr>
                <tr>
                    <td><label for="company">Bannière: </label></td>
                    <td><select id="company" name="company">
                        <th:block th:each="company : ${companies}">
                            <option th:text="${company.companyName}" th:value="${company.companyID}"></option>
                        </th:block>
                    </select></td>
                </tr>
                <tr>
                    <td><label for="recipeDescription">Courte description: </label></td>
                    <td><input id="recipeDescription" name="recipeDescription" required type="text"/></td>
                </tr>
                <tr>
                    <td><label for="sample">Échantillon: </label></td>
                    <td><input id="sample" name="sample" required type="number"/></td>
                </tr>
                <tr>
                    <td><label for="approbationDate">Date d'approbation: </label></td>
                    <td><input id="approbationDate" name="approbationDate" type="date"/></td>
                </tr>
                <tr>
                    <td><label for="remark">Remarque: </label></td>
                    <td><textarea cols="30" form="recipe-form" id="remark" name="remark" rows="10"></textarea></td>
                </tr>
                <tr>
                    <td>
                        <button class="returnIndex" type="button">Retour</button>
                    </td>
                    <td>
                        <button type="submit">Enregistrer</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</section>

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