<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!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="~{ezyadmin}">

<body>
<div layout:fragment="content" class="row">
    <div class="col-md-10">
        <form id="addUserForm" onsubmit="return false;">
            <div class="form-group row">
                <label for="username" class="col-sm-3 col-form-label">
                    [[#{username}]] (<span class="text-danger">*</span>)
                </label>
                <div class="col-lg-7 col-md-6">
                    <input type="text" name="username" id="username"
                           class="form-control" th:placeholder="#{username}">
                    <span>[[#{username_input_guide}]]</span>
                </div>
                <label id="usernameErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="username">
                    <i class="far fa-times-circle"></i> <span id="usernameError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="email" class="col-sm-3 col-form-label">
                    [[#{email}]] (<span class="text-danger">*</span>)
                </label>
                <div class="col-lg-7 col-md-6">
                    <div class="d-flex align-items-center">
                        <input type="email" name="email" id="email"
                           class="form-control" th:placeholder="#{email}">
                        <button type="button" class="btn btn-primary text-nowrap"
                                onclick="ezyadmin.randomWebEmail('email');">
                            [[#{random}]]
                        </button>
                    </div>
                </div>
                <label id="emailErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="email">
                    <i class="far fa-times-circle"></i> <span id="emailError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="displayName" class="col-sm-3 col-form-label">[[#{display_name}]]</label>
                <div class="col-lg-7 col-md-6">
                    <input type="text" name="displayName" id="displayName"
                           class="form-control" th:placeholder="#{display_name}">
                </div>
                <label id="displayNameErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="displayName">
                    <i class="far fa-times-circle"></i> <span id="displayNameError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="phone" class="col-sm-3 col-form-label">[[#{phone}]]</label>
                <div class="col-lg-7 col-md-6">
                    <input type="text" name="phone" id="phone"
                           class="form-control" th:placeholder="#{phone}">
                </div>
                <label id="phoneErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="phone">
                    <i class="far fa-times-circle"></i> <span id="phoneError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="website" class="col-sm-3 col-form-label">[[#{website}]]</label>
                <div class="col-lg-7 col-md-6">
                    <input type="text" name="website" id="website"
                           class="form-control" th:placeholder="#{website}">
                </div>
                <label id="websiteErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="website">
                    <i class="far fa-times-circle"></i> <span id="websiteError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="username" class="col-sm-3 col-form-label">
                    [[#{password}]] (<span class="text-danger">*</span>)
                </label>
                <div class="col-lg-7 col-md-6">
                    <div class="d-flex align-items-center">
                        <input type="password" name="password" id="password"
                               class="form-control" th:placeholder="#{password}">
                        <button type="button" class="btn btn-secondary" id="showPasswordButton" tabindex="-1"
                               onclick="ezyadmin.togglePasswordVisible('password', 'showPasswordButton', 'hidePasswordButton')">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-secondary d-none" id="hidePasswordButton" tabindex="-1"
                                onclick="ezyadmin.togglePasswordVisible('password', 'showPasswordButton', 'hidePasswordButton')">
                            <i class="fas fa-eye-slash"></i>
                        </button>
                    </div>
                </div>
                <label id="passwordErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="password">
                    <i class="far fa-times-circle"></i> <span id="passwordError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label class="col-sm-3 col-form-label">
                </label>
                <div class="col-sm-9">
                    <div class="d-flex align-items-center">
                        <button type="button" id="randomPasswordButton" class="btn btn-outline-primary pt-1 pb-1"
                                onclick="ezyadmin.onRandomPasswordClick();">
                            [[#{random}]]
                        </button>
                        <span class="ml-2" id="generatedPassword"></span>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="username" class="col-sm-3 col-form-label">
                    [[#{retype_password}]] (<span class="text-danger">*</span>)
                </label>
                <div class="col-lg-7 col-md-6">
                    <div class="d-flex align-items-center">
                        <input type="password" id="retypePassword" name="retypePassword"
                               class="form-control" th:placeholder="#{retype_password}">
                        <button type="button" class="btn btn-secondary" id="showRetypePasswordButton" tabindex="-1"
                               onclick="ezyadmin.togglePasswordVisible('retypePassword', 'showRetypePasswordButton', 'hideRetypePasswordButton')">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button type="button" class="btn btn-secondary d-none" id="hideRetypePasswordButton" tabindex="-1"
                                onclick="ezyadmin.togglePasswordVisible('retypePassword', 'showRetypePasswordButton', 'hideRetypePasswordButton')">
                            <i class="fas fa-eye-slash"></i>
                        </button>
                    </div>
                </div>
                <label id="retypePasswordErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="retypePassword">
                    <i class="far fa-times-circle"></i> [[#{not_match}]]
                </label>
            </div>
            <th:block th:replace="~{fragments/additional :: content}" />
            <div id="addUserPropertiesPlaceHolder"></div>
            <div class="form-group row">
                <label for="roleIds" class="col-sm-3 col-form-label">[[#{roles}]]</label>
                <div class="col-sm-4">
                    <select name="roleIds" id="roleIds" multiple="multiple" class="form-control" size="12">
                        <option th:each="role,iterator : ${roles}"
                                th:value="${role.id}" th:text="${(iterator.index + 1) + '. ' + role.displayName}">
                        </option>
                    </select>
                </div>
                <div class="col-sm-3">
                    <button type="button" class="btn btn-primary btn-block mt-md-0 mt-3" data-toggle="modal" data-target="#add-new-role-modal">
                        [[#{add_new_role}]]
                    </button>
                </div>
                <label id="roleIdsErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="roleIds">
                    <i class="far fa-times-circle"></i> [[#{required}]]
                </label>
            </div>
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-4 col-sm-6">
                    <button type="button" class="btn btn-primary btn-block" onclick="ezyadmin.addNewUser();">
                        [[#{submit}]]
                    </button>
                </div>
                <div class="col-md-5"></div>
                <!-- /.col -->
            </div>
        </form>
    </div>
    <div class="col-md-2"></div>
    <div class="col-12" id="addUserPlaceHolder"></div>
</div>
<th:block layout:fragment="modals">
<th:block th:replace="~{modals/add-new-role :: content}" />
</th:block>
<script layout:fragment="scripts">
// ========== random password =============
ezyadmin.onRandomPasswordClick = function() {
	var password = ezyadmin.randomPassword();
	$('#generatedPassword').text(password);
	$('#password').val(password);
	$('#retypePassword').val(password);
}
// ========== add user =============
ezyadmin.addNewUser = function() {
    ezyadmin.addOrEditUser('add');
}

// ==================== add new role ============
ezyadmin.addNewRoleApi = {
    url: '/api/v1/user/role-names/add'
};
</script>
<th:block layout:fragment="post-scripts">
<th:block th:replace="~{users/scripts :: add-edit}" />
<th:block th:replace="~{modals/add-new-role :: scripts}" />
</th:block>
</body>
</html>
