<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>New Order</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
          crossorigin="anonymous">
    <link href="/static/App.css" rel="stylesheet" media="screen" th:href="@{/App.css}"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div th:replace="/base/baseapp :: header" class="App-header">...</div>
    <div th:replace="/base/baseapp :: nav" class="nav-">...</div>
    <div class="container">
        <a class="btn button-go4me" th:href="@{/}">Back!</a>
        <h1 class="text-center display-1">New Order</h1>
        <div class="d-flex justify-content-center mb-5">
            <form class="form-horizontal" action="#" th:object="${newOrder}" th:action="@{/neworder}"
                  method="POST" style="margin: 10px">
                <div class="form-group">
                    <fieldset>
                        <div class="form-group">
                            <div class="alert alert-danger" th:if="${#fields.hasAnyErrors()}">
                                <div th:each="detailedError : ${#fields.detailedErrors()}">
                                    <span th:text="${detailedError.message}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" th:classappend="${#fields.hasErrors('Day')}? 'has-error'">
                            <label>Day</label>
                            <input type="number" class="form-control input-sm" th:field="*{day}"
                                   autofocus="autofocus" placeholder="Day" required min="1" max="31" />
                        </div>
                        <div class="form-group" th:classappend="${#fields.hasErrors('Month')}? 'has-error'">
                            <label>Month</label>
                            <select class="exampleSelect1" th:field="*{month}">
                                <option value="January">January</option>
                                <option value="February">February</option>
                                <option value="March">March</option>
                                <option value="April">April</option>
                                <option value="May">May</option>
                                <option value="June">June</option>
                                <option value="July">July</option>
                                <option value="August">August</option>
                                <option value="September">September</option>
                                <option value="October">October</option>
                                <option value="November">November</option>
                                <option value="December">December</option>
                            </select>
                        </div>
                        <div class="form-group" th:classappend="${#fields.hasErrors('Hour')}? 'has-error'">
                            <label>Hour</label>
                            <input type="text" class="form-control input-sm" th:field="*{hour}"
                                   autofocus="autofocus" placeholder="Hour (hh:mm)" required />
                        </div>
                        <div class="form-group" th:classappend="${#fields.hasErrors('description')}? 'has-error'">
                            <label>Description</label>
                            <input type="text" class="form-control input-sm" th:field="*{description}"
                                   autofocus="autofocus" placeholder="Description" maxlength="240" required/>
                        </div>
                        <div class="form-group" th:classappend="${#fields.hasErrors('maxCost')}? 'has-error'">
                            <label>Max Cost</label>
                            <input type="number" class="form-control input-sm" th:field="*{maxCost}"
                            autofocus="autofocus" placeholder="MaxCost" min="0" required/>
                        </div>
                    </fieldset>
                </div>
                    <button type="submit" class="btn btn-sm button-go4me btn-block">Save</button>
            </form>
        </div>
    </div>
</body>
</html>