<!--
 ~ 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 class="form-horizontal" id="editAdminForm" onsubmit="return false;">
            <div class="form-group row">
                <label for="username" class="col-sm-3 col-form-label">[[#{username}]]</label>
                <div class="col-sm-9">
                    <div class="d-flex align-items-center h-100">
                        <span id="username" th:text="${editAdmin.username}"></span>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3 d-flex align-items-center">
                    <label>[[#{avatar}]]:</label>
                </div>
                <div class="col-9">
                    <div class="image-button wh-72px mb-3">
                        <img id="adminAvatarImage" class="rounded-circle object-fit-cover" width="72" height="72"
                             th:src="${adminAvatarImage != null ? (editAdmin.id == adminId ? adminAvatarImage.getMeUrlOrDefault('') : adminAvatarImage.getUrlOrDefault('')) : '#'}"
                             th:classappend="${adminAvatarImage == null ? 'd-none' : ''}"
                             th:if="${editAdmin.id == adminId || adminRoles.isAccessible('/api/v1/media/{name}')}">
                        <div id="adminAvatarImageTmp" class="rounded-circle avatar-tmp wh-72px"
                             th:classappend="${adminAvatarImage == null || (editAdmin.id != adminId && !adminRoles.isAccessible('/api/v1/media/{name}')) ? '' : 'd-none'}"
                             th:text="${#strings.capitalize(editAdmin.getName().charAt(0))}">
                        </div>
                        <button type="button" id="editAvatarButton" class="rounded-circle"
                                onclick="ezyadmin.selectAdminAvatarImage();"
                                th:if="${editAdmin.id == adminId}">
                            <i class="fas fa-pencil-alt"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-3 d-flex align-items-center">
                    <label>[[#{cover_image}]]:</label>
                </div>
                <div class="col-9">
                    <div class="image-button mb-3 w-192" id="mainAdminCoverImageContainer"
                         th:classappend="${adminCoverImage != null ? '' : 'd-none'}">
                        <img id="adminCoverImage" class="object-fit-cover mw-100" width="192" height="128"
                             th:classappend="${adminCoverImage != null ? '' : 'd-none'}"
                             th:if="${editAdmin.id == adminId || adminRoles.isAccessible('/api/v1/media/{name}')}"
                             th:src="${adminCoverImage != null ? (editAdmin.id == adminId ? adminCoverImage.getMeUrlOrDefault('') : adminCoverImage.getUrlOrDefault('')) : '#'}">
                        <button type="button" id="editCoverImageButton" onclick="ezyadmin.selectAdminCoverImage();"
                                th:if="${editAdmin.id == adminId}">
                            <i class="fas fa-pencil-alt"></i>
                        </button>
                    </div>
                    <button type="button" id="addAdminCoverImageButton" class="btn btn-link pl-0"
                            th:classappend="${adminCoverImage != null ? 'd-none' : ''}"
                            th:if="${editAdmin.id == adminId}"
                            onclick="ezyadmin.selectAdminCoverImage();">
                        [[#{add}]]
                        <i class="fas fa-plus-square"></i>
                    </button>
                </div>
            </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">
                    <input type="email" name="email" th:value="${editAdmin.email}" id="email"
                           class="form-control" th:placeholder="#{email}">
                </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" th:value="${editAdmin.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="tel" name="phone" th:value="${editAdmin.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="email">
                    <i class="far fa-times-circle"></i> <span id="phoneError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="jobTitle" class="col-sm-3 col-form-label">[[#{job_title}]]</label>
                <div class="col-lg-7 col-md-6">
                    <input type="text" name="jobTitle" th:value="${adminJobTitle}" id="jobTitle"
                           class="form-control" th:placeholder="#{job_title}">
                </div>
                <label id="jobTitleErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="jobTitle">
                    <i class="far fa-times-circle"></i> <span id="jobTitleError">[[#{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" th:value="${editAdmin.url}" 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}]]</label>
                <div class="col-sm-3">
                    <button th:if="${editAdmin.id == adminId ||
                                     adminRoles.isAccessible('/api/v1/admins/{username}/update-password', 'PUT')}"
                            type="button" class="btn btn-outline-primary form-control"
                        onclick="ezyadmin.showChangePasswordModal();">[[#{change}]]</button>
                </div>
                <div class="col-sm-3">
                    <button th:if="${editAdmin.id != adminId &&
                                     adminRoles.isAccessible('/api/v1/admins/{username}/request-reset-password', 'POST')}"
                            th:attr="onclick=|ezyadmin.requestToResetPassword('${editAdmin.username}')|"
                            type="button" class="btn btn-outline-danger form-control mt-md-0 mt-2">
                        [[#{request_to_reset}]]
                    </button>
                </div>
                <div class="col-sm-3"></div>
            </div>
            <div class="form-group row">
                <label for="description" class="col-sm-3 col-form-label">[[#{description}]]</label>
                <div class="col-lg-7 col-md-6">
                    <textarea name="description" id="description"
                              class="form-control"
                              th:placeholder="#{description}">[[${adminDescription}]]</textarea>
                </div>
                <label id="descriptionErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="description">
                    <i class="far fa-times-circle"></i> <span id="descriptionError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="roleIds" class="col-sm-3 col-form-label">[[#{roles}]] (<span class="text-danger">*</span>)</label>
                <div class="col-sm-4">
                    <select name="roleIds" id="roleIds" multiple="multiple" class="form-control" size="12"
                            th:disabled="${!adminRoles.isAccessible('/api/v1/admins/me/roles', 'PUT') && !adminRoles.isAccessible('/api/v1/admins/{username}/roles', 'PUT')}">
                        <option th:each="role,iterator : ${roles}"
                                th:selected="${editAdminRoles.contains(role)}"
                                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-2" data-toggle="modal" data-target="#add-new-role-modal"
                            th:if="${adminRoles.isAccessible('/api/v1/admin/role-names/add', 'POST')}">
                        [[#{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.updateAdmin();"
                            th:if="${adminRoles.isAccessible('/api/v1/admins/me', 'PUT') || adminRoles.isAccessible('/api/v1/admins/{username}', 'PUT')}">
                        [[#{submit}]]
                    </button>
                </div>
                <div class="col-md-5"></div>
                <!-- /.col -->
            </div>
        </form>
    </div>
    <div class="col-md-2"></div>
</div>
<th:block layout:fragment="modals">
    <th:block th:replace="~{modals/change-password :: content}" />
    <th:block th:replace="~{modals/add-new-role :: content}" />
</th:block>
<script layout:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.adminIsMe = /*[[${editAdmin.id == adminId}]]*/;
ezyadmin.selectedAdminUsername = /*[[${editAdmin.username}]]*/ '';
ezyadmin.messages.request_successfully = /*[[#{request_successfully}]]*/ '';
/*]]>*/

// ========== edit admin =============
ezyadmin.updateAdmin = function() {
     ezyadmin.addOrEditAdmin('edit');
}

ezyadmin.changePasswordApi = {
    url: ezyadmin.adminIsMe
        ? '/api/v1/admins/me/update-password'
        : '/api/v1/admins/' + ezyadmin.selectedAdminUsername + '/update-password'
};

ezyadmin.onCopyResetPasswordLinkClick = function()  {
    $.ajax({
        type: "POST",
        url: '/api/v1/admins/' + ezyadmin.selectedAdminUsername + '/generate-reset-password-uri',
        success: function (data) {
            navigator.clipboard.writeText(location.origin + data);
            ezyadmin.shortToast(
                'bg-success',
                ezyadmin.messages.copied
            );
        },
        error: function (e) {
            ezyadmin.processUpdateApiErrors({}, e);
        }
    });
}

ezyadmin.requestToResetPassword = function(adminUsername) {
    $.ajax({
        type: 'POST',
        url: '/api/v1/admins/' + adminUsername + '/request-reset-password',
        success: function (data) {
            ezyadmin.shortToast(
                'bg-success',
                ezyadmin.messages.request_successfully
            );
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors({}, data);
        }
    });
}
// ==================== add new role ============
ezyadmin.addNewRoleApi = {
    url: '/api/v1/admin/role-names/add'
};
</script>
<th:block layout:fragment="post-scripts">
    <th:block th:replace="~{admins/scripts :: avatar}" />
    <th:block th:replace="~{modals/change-password :: scripts}" />
    <th:block th:replace="~{admins/scripts :: add-edit}" />
    <th:block th:replace="~{modals/add-new-role :: scripts}" />
</th:block>
</body>
</html>
