<!DOCTYPE html>
<html   lang="en" xmlns:tr="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Configuration</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="@{/profile}">Back!</a>
    <h1 class="text-center display-1">Configuration</h1>
    <div class="d-flex justify-content-center mb-5">
        <form class="form-horizontal" action="#" th:object="${User}"
              th:action="@{'/profile/config/'}" 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>
                    <input th:field="*{id}" type="hidden">
                    <div class="form-group" th:classappend="${#fields.hasErrors('UserName')}? 'has-error'">
                        <label>Username</label>
                        <input type="text" class="form-control input-sm" th:field="*{userName}"
                               autofocus="autofocus" placeholder="Username" maxlength="50" required/>
                    </div>
                    <div class="form-group" th:classappend="${#fields.hasErrors('email')}? 'has-error'">
                        <label>email</label>
                        <input type="email" class="form-control input-sm" th:field="*{email}"
                               placeholder="Email" maxlength="50" required/>
                    </div>
                    <div class="form-group" th:classappend="${#fields.hasErrors('localization.address1')}? 'has-error'">
                        <label>Address 1</label>
                        <input type="text" class="form-control input-sm" th:field="*{localization.address1}"
                               placeholder="Address 1" maxlength="50" required/>
                    </div>
                    <div class="form-group" th:classappend="${#fields.hasErrors('localization.address2')}? 'has-error'">
                        <label>Address 2 (optional):</label>
                        <input type="text" class="form-control input-sm" th:field="*{localization.address2}"
                               placeholder="Address 2" maxlength="50" />
                    </div>
                    <div class="form-group" th:classappend="${#fields.hasErrors('localization.zipCode')}? 'has-error'">
                        <label>zip Code</label>
                        <input type="number" class="form-control input-sm" th:field="*{localization.zipCode}"
                               placeholder="zip code" maxlength="50" min="0" required/>
                    </div>
                    <div class="form-group" th:classappend="${#fields.hasErrors('localization.city')}? 'has-error'">
                        <label>City</label>
                        <input type="text" class="form-control input-sm" th:field="*{localization.city}"
                               placeholder="city" maxlength="50" required/>
                    </div>
                    <div class="form-group" th:classappend="${#fields.hasErrors('localization.country')}? 'has-error'">
                        <label>Country</label>
                        <input type="text" class="form-control input-sm" th:field="*{localization.country}"
                               placeholder="Country" maxlength="50" required/>
                    </div>
                    <div class="form-group" th:classappend="${#fields.hasErrors('twitterAccount')}? 'has-error'">
                        <label>Twitter (Optional): </label>
                        <input type="text" class="form-control input-sm" th:field="*{twitterAccount}"
                               placeholder="Twitter" maxlength="50" />

                    </div>
                </fieldset>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-sm button-go4me btn-block">Save</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>
