<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorate="~{layout.html}">
<head>
<title>Aplikacja Taco Cloud</title>
<script th:src="@{/scripts/ingredients.js}"></script>
</head>

<body>
  <section layout:fragment="main" class="content">
    <h1>Przygotuj własne taco!</h1>
    <h2>
      Jesteś głodny, <span sec:authentication="principal.fullname">IMIĘ I NAZWISKO</span>?
    </h2>

    <form th:method="POST" 
          th:object="${design}" 
          th:action="@{/design}"
          id="tacoForm">

      <span class="validationError"
        th:if="${#fields.hasErrors('ingredients')}"
        th:errors="*{ingredients}">Błąd składnika</span>

      <div class="grid">
        <div class="ingredient-group">
          <h3>Wybierz rodzaj mąki:</h3>
          <div id="wraps"></div>
        </div>

        <div class="ingredient-group">
          <h3>Wybierz mięso:</h3>
          <div id="proteins"></div>
        </div>

        <div class="ingredient-group">
          <h3>Wybierz sery:</h3>
          <div id="cheeses"></div>
        </div>

        <div class="ingredient-group">
          <h3>Wybierz warzywa:</h3>
          <div id="veggies"></div>
        </div>

        <div class="ingredient-group">
          <h3>Wybierz sosy:</h3>
          <div id="sauces"></div>
        </div>
      </div>

      <div>
        <h3>Nadaj nazwę przygotowanemu taco:</h3>
        <input type="text" th:field="*{name}" /> <span
          class="validationError" th:if="${#fields.hasErrors('name')}"
          th:errors="*{name}">Błąd nazwy taco</span> <br />

        <button>Wyślij swoje zamówienie</button>
      </div>
    </form>
  </section>
</body>
</html>
