<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
</head>
<body>
<nav layout:fragment="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="/"><span class="ui-menuitem-text"><i
                class="fa fa-plane fa-4" aria-hidden="true"></i> Balance</span></a>
    </div>
</nav>
<div class="container" layout:fragment="content">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#signin">Вход в систему</a></li>
        <li><a href="#register">Регистрация</a></li>
    </ul>
    <div class="tab-content">
        <div id="signin" class="tab-pane active">
            <form th:action="@{/login}" method="post" class="margined-top-10">
                <fieldset>
                    <div class="form-group">
                        <input type="text" name="username" id="username" class="form-control"
                               placeholder="Логин" required="true" autofocus="true"/>
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" id="password" class="form-control"
                               placeholder="Пароль" required="true"/>
                    </div>
                    <button type="submit" class="btn btn-success btn-block">Войти</button>
                    <div class="form-group">
                        <small class="form-text text-muted">
                            <a href="/resetRequest">Забыли пароль?</a>
                        </small>
                    </div>
                </fieldset>
            </form>
        </div>
        <div id="register" class="tab-pane">
            <form id="register-form" class="margined-top-10">
                <fieldset>
                    <div class="form-group">
                        <input type="text" name="login" id="login" class="form-control"
                               placeholder="Логин" required="true" autofocus="true"
                               minlength="4" maxlength="50"/>
                    </div>
                    <div class="form-group">
                        <input type="text" name="firstName" id="firstName" class="form-control"
                               placeholder="Имя" required="true" autofocus="true"
                               minlength="2" maxlength="50"/>
                    </div>
                    <div class="form-group">
                        <input type="text" name="lastName" id="lastName" class="form-control"
                               placeholder="Фамилия" required="true" autofocus="true"
                               minlength="2" maxlength="50"/>
                    </div>
                    <div class="form-group">
                        <input type="text" name="email" id="email" class="form-control"
                               placeholder="E-Mail" required="true" autofocus="true"
                               minlength="5" maxlength="100"/>
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" id="password1" class="form-control"
                               placeholder="Пароль" required="true" maxlength="50"/>
                    </div>
                    <div class="form-group">
                        <input type="password" name="passwordConfirm" id="password2" class="form-control"
                               placeholder="Пароль (подтверждение)" required="true" maxlength="50"/>
                    </div>
                    <button type="submit" class="btn btn-info btn-block">Создать запись</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>
<th:block layout:fragment="data-scripts">
    <script type="text/javascript">
        /*<![CDATA[*/
        $(document).ready(function () {
            if (isUrlVarExists('error')) {
                showFeedbackMessage('Ошибка входа в систему', 'danger');
            }
            if (isUrlVarExists('logout')) {
                showFeedbackMessage('Выход из системы произведен');
            }
            registerFormToJson = function () {
                var formData = {};
                $("#register-form").find(":input").not(":button").each(function () {
                    if ($(this).val() == null || $(this).val() === "") {
                        return true;
                    }
                    formData[$(this).attr("name")] = $(this).val();
                });
                return JSON.stringify(formData);
            };
            registerUser = function () {
                postToRest(urlUsersRegister, registerFormToJson(), function (data) {
                    showFeedbackMessage("Пользователь успешно создан");
                    $("#register-form").find(":input").not(":button").val("");
                });
            };
            $("#register-form").submit(function () {
                registerUser();
                return false;
            });
        });
        /*]]>*/

    </script>
</th:block>
<th:block layout:fragment="scripts">
    <script src="/js/hashable-tabs.js"></script>
</th:block>
</body>
</html>