Untitled

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>

    <title>Interviewer</title>
    <link rel="stylesheet" th:href="@{/css/custom-style.css}"/>
    <link rel="stylesheet" th:href="@{/css/userNewStyle.css}"/>
</head>
<body>
<div class="container-fluid">
    <!--/*/ <th:block th:include="fragments/header :: header"><th:block> /*/-->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2">
            <!--/*/ <th:block th:include="fragments/header :: sidebar"><th:block> /*/-->
        </div>
        <div class="col-xs-10">
            <div class="container">
                <div class="row">
                    <div class="col-xs-5 col-xs-offset-2 row-container">
                        <h3 class="text-center">Add New User</h3>
                        <hr/>
                        <form th:action="@{/users/new}" th:object="${user}" method="post" class="form-container">
                            <div class="form-group">
                                <label for="username">Username:</label>
                                <input type="text" required minlength="5" maxlength="15" th:field="*{username}"
                                       class="form-control" id="username" placeholder="Enter username" name="username"/>
                                <p class="text-danger" th:if="${usernameError}" th:text="${usernameError}"></p>
                                <p class="text-danger" th:if="${#fields.hasErrors('username')}" th:errors="*{username}">
                                    Username is required and must be between 5 and 15 characters</p>
                            </div>
                            <div class="form-group">
                                <label for="password">Password:</label>
                                <input type="password" required minlength="6" th:field="*{password}"
                                       class="form-control" id="password" placeholder="Enter password" name="password"/>
                                <p class="text-danger" th:if="${#fields.hasErrors('password')}" th:errors="*{password}">
                                    Password minimum length is 6 characters</p>
                            </div>
                            <div class="form-group">
                                <label for="confirmNewPassword">Confirm Password:</label>
                                <input type="password" class="form-control" id="confirmNewPassword"
                                       placeholder="Confirm Password" name="confirmNewPassword"/>
                            </div>
                            <p class="text-danger" th:if="${passwordError}" th:text="${passwordError}"></p>
                            <div class="form-group">
                                <label for="name">Name:</label>
                                <input type="text" required minlength="3" maxlength="20" th:field="*{name}"
                                       class="form-control" id="name" placeholder="Enter name" name="name"/>
                                <p class="text-danger" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name is
                                    required and must be between 3 and 20 characters</p>
                            </div>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="text" required th:field="*{email}" class="form-control" id="email"
                                       placeholder="Enter email" name="email"/>
                                <p class="text-danger" th:if="${emailError}" th:text="${emailError}"></p>
                                <p class="text-danger" th:if="${#fields.hasErrors('email')}" th:errors="*{email}">Email
                                    is required</p>
                            </div>
                            <div class="form-group">
                                <label for="selectRole">Select role:</label>
                                <select id="selectRole" required th:field="*{roles}" name="selectRole"
                                        class="form-control">
                                    <option th:each="role : ${roles}" th:value="${role}" th:text="${role}"></option>
                                </select>
                            </div>
                            <div class="form-group" th:if="${not #lists.isEmpty(companies)}">
                                <label for="selectCompany">Select Company:</label>
                                <select id="selectCompany" th:field="*{company}" name="selectCompany"
                                        class="form-control">
                                    <option th:value="null"></option>
                                    <option th:each="company : ${companies}" th:value="${company.id}"
                                            th:text="${company.name}"></option>
                                </select>
                            </div>
                            <p class="text-center">
                                <a href="/users" class="btn btn-default">Back</a>
                                <button type="submit" class="btn btn-success">Add</button>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="/webjars/jquery/2.1.1/jquery.js"></script>
    <script src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>