<!--
 ~ 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: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="websiteSettingsForm" onsubmit="return false;">
            <div class="form-group row">
                <label for="websiteName" class="col-md-4 col-form-label">[[#{website_name}]]</label>
                <div class="col-md-6">
                    <input type="text" name="websiteName" id="websiteName"
                           class="form-control" th:placeholder="#{name}"
                           onkeydown="ezyadmin.onKeyDownToSaveWebsiteSettings();"
                           th:value="${websiteName}">
                </div>
                <label id="websiteNameErrorLabel" class="col-md-2 col-form-label text-danger d-none" for="websiteName">
                    <i class="far fa-times-circle"></i> <span id="websiteNameError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="websiteTitle" class="col-md-4 col-form-label">[[#{website_title}]]</label>
                <div class="col-md-6">
                    <input type="text" name="websiteTitle" id="websiteTitle"
                           class="form-control" th:placeholder="#{title}"
                           onkeydown="ezyadmin.onKeyDownToSaveWebsiteSettings();"
                           th:value="${websiteTitle}">
                </div>
                <label id="websiteTitleErrorLabel" class="col-md-2 col-form-label text-danger d-none" for="websiteTitle">
                    <i class="far fa-times-circle"></i> <span id="websiteTitleError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="pageTitleSeparator" class="col-md-4 col-form-label">[[#{page_title_separator}]]</label>
                <div class="col-md-6">
                    <input type="text" name="pageTitleSeparator" id="pageTitleSeparator"
                           class="form-control" th:placeholder="#{page_title_separator_example}"
                           onkeydown="ezyadmin.onKeyDownToSaveWebsiteSettings();"
                           th:value="${pageTitleSeparator}">
                </div>
                <label id="pageTitleSeparatorErrorLabel" class="col-md-2 col-form-label text-danger d-none" for="pageTitleSeparator">
                    <i class="far fa-times-circle"></i> <span id="pageTitleSeparatorError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="websiteTagLine" class="col-md-4 col-form-label">[[#{website_tagline}]]</label>
                <div class="col-md-6">
                    <input type="text" name="websiteTagLine" id="websiteTagLine"
                           class="form-control" th:placeholder="#{tagline}"
                           onkeydown="ezyadmin.onKeyDownToSaveWebsiteSettings();"
                           th:value="${websiteTagLine}">
                </div>
                <label id="websiteTagLineErrorLabel" class="col-md-2 col-form-label text-danger d-none" for="websiteTagLine">
                    <i class="far fa-times-circle"></i> <span id="websiteTagLineError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <button th:if="${adminRoles.isAccessible('/api/v1/settings/website', 'PUT')}"
                            type="button" class="btn btn-primary btn-block" onclick="ezyadmin.saveWebsiteSettings();">
                        [[#{save}]]
                    </button>
                </div>
                <div class="col-md-6"></div>
                <!-- /.col -->
            </div>
        </form>
    </div>
    <div class="col-md-2"></div>
    <div class="col-12">
        <hr class="mb-4" />
    </div>
    <div class="col-12">
        <h3>[[#{regular_settings}]]</h3>
    </div>
    <div class="col-lg-10">
        <form id="editRegularSettingsForm" onsubmit="return false;">
            <div class="form-group row">
                <label for="allowSearchUserByLikeOperator" class="col-md-4 col-form-label">
                    [[#{allow_search_user_by_like_operator}]]
                </label>
                <div class="col-md-8 d-flex align-items-center">
                    <input type="checkbox" name="allowSearchUserByLikeOperator" id="allowSearchUserByLikeOperator" class="form-check wh-1rem"
                           th:value="${allowSearchUserByLikeOperator}"
                           th:checked="${allowSearchUserByLikeOperator}">
                </div>
            </div>
            <div class="form-group row">
                <label for="allowSearchMediaByLikeOperator" class="col-md-4 col-form-label">
                    [[#{allow_search_media_by_like_operator}]]
                </label>
                <div class="col-md-8 d-flex align-items-center">
                    <input type="checkbox" name="allowSearchMediaByLikeOperator" id="allowSearchMediaByLikeOperator" class="form-check wh-1rem"
                           th:value="${allowSearchMediaByLikeOperator}"
                           th:checked="${allowSearchMediaByLikeOperator}">
                </div>
            </div>
            <div class="form-group row">
                <label for="maxUploadFileSize" class="col-md-4 col-form-label">
                    [[#{max_upload_file_size}]]
                </label>
                <div class="col-md-4">
                    <input type="text" name="maxUploadFileSize" id="maxUploadFileSize"
                           class="form-control" th:placeholder="#{max_upload_file_size}"
                           th:value="${maxUploadFileSizeText}">
                </div>
                <label id="maxUploadFileSizeErrorLabel" class="col-md-4 col-form-label text-danger d-none" for="maxUploadFileSize">
                    <i class="far fa-times-circle"></i> <span id="maxUploadFileSizeError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="maxUploadImageFileSize" class="col-md-4 col-form-label">
                    [[#{max_upload_image_file_size}]]
                </label>
                <div class="col-md-4">
                    <input type="text" name="maxUploadImageFileSize" id="maxUploadImageFileSize"
                           class="form-control" th:placeholder="#{max_upload_image_file_size}"
                           th:value="${maxUploadImageFileSizeText}">
                </div>
                <label id="maxUploadImageFileSizeErrorLabel" class="col-md-4 col-form-label text-danger d-none" for="maxUploadImageFileSize">
                    <i class="far fa-times-circle"></i> <span id="maxUploadImageFileSizeError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="allowReplaceMedia" class="col-md-4 col-form-label">
                    [[#{allow_media_replacement}]]
                </label>
                <div class="col-md-8 d-flex align-items-center">
                    <input type="checkbox" name="allowReplaceMedia" id="allowReplaceMedia" class="form-check wh-1rem"
                           th:checked="${webAllowReplaceMedia}">
                </div>
            </div>
            <div class="form-group row">
                <label for="allowReduceMediaFileSize" class="col-md-4 col-form-label">
                    [[#{allow_media_file_size_reduction}]]
                </label>
                <div class="col-md-8 d-flex align-items-center">
                    <input type="checkbox" name="allowReduceMediaFileSize" id="allowReduceMediaFileSize" class="form-check wh-1rem"
                           th:checked="${webAllowReduceMediaFileSize}">
                </div>
            </div>
            <div class="form-group row">
                <label for="allowPermanentlyDeleteMedia" class="col-md-4 col-form-label">
                    [[#{allow_permanently_delete_media}]]
                </label>
                <div class="col-md-8 d-flex align-items-center">
                    <input type="checkbox" name="allowPermanentlyDeleteMedia" id="allowPermanentlyDeleteMedia" class="form-check wh-1rem"
                           th:checked="${webAllowPermanentlyDeleteMedia}">
                </div>
            </div>
            <div class="form-group row">
                <label for="acceptedMediaMimeTypes" class="col-md-4 col-form-label">
                    [[#{accepted_media_types}]]
                </label>
                <div class="col-md-5">
                    <textarea name="acceptedMediaMimeTypes" id="acceptedMediaMimeTypes"
                              class="form-control" rows="4"
                              th:placeholder="#{accepted_media_types}">[[${#strings.setJoin(acceptedMediaMimeTypes, ',')}]]</textarea>
                </div>
                <label id="acceptedMediaMimeTypesErrorLabel" class="col-md-3 col-form-label text-danger d-none" for="acceptedMediaMimeTypes">
                    <i class="far fa-times-circle"></i> <span id="acceptedMediaMimeTypesError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="webAutoPassManagementUris" class="col-md-4 col-form-label">
                    [[#{auto_pass_management_uris}]]
                </label>
                <div class="col-md-5">
                    <textarea name="webAutoPassManagementUris" id="webAutoPassManagementUris"
                              class="form-control" rows="4"
                              th:placeholder="#{auto_pass_management_uris}">[[${#strings.setJoin(webAutoPassManagementUris, ',')}]]</textarea>
                </div>
                <label id="webAutoPassManagementUrisErrorLabel" class="col-md-3 col-form-label text-danger d-none" for="webAutoPassManagementUris">
                    <i class="far fa-times-circle"></i> <span id="webAutoPassManagementUrisError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-2 mb-2">
                    <button th:if="${adminRoles.isAccessible('/api/v1/settings/website/regular', 'PUT')}"
                            type="button" class="btn btn-primary btn-block" onclick="ezyadmin.editRegularSettings();">
                        [[#{save}]]
                    </button>
                </div>
                <div class="col-md-6"></div>
                <!-- /.col -->
            </div>
        </form>
    </div>
    <div class="col-lg-2"></div>
    <div class="col-12">
        <hr class="mb-4" />
    </div>
    <div class="col-12">
        <h3>[[#{user_access_token}]]</h3>
    </div>
    <div class="col-lg-10 mt-3">
        <form id="changeEncryptionKeyForm" onsubmit="return false;">
            <div class="form-group row">
                <label for="userTokenExpiredTimeInDay" class="col-md-4 col-form-label">
                    [[#{token_expiration_time}]]
                </label>
                <div class="col-md-4">
                    <div class="d-flex align-items-center gap-2">
                        <input type="text" name="tokenExpiredTimeInDay" id="userTokenExpiredTimeInDay"
                               class="form-control" th:placeholder="#{token_expiration_time}"
                               oninput="ezyadmin.onKeyDownToEditUserTokenExpirationTimeSetting(this);"
                               th:value="${userTokenExpiredTimeInDay}">
                        <span class="text-nowrap">[[#{day_s}]]</span>
                    </div>
                </div>
                <label id="userTokenExpiredTimeInDayErrorLabel" class="col-md-4 col-form-label text-danger d-none" for="userTokenExpiredTimeInDay">
                    <i class="far fa-times-circle"></i> <span id="userTokenExpiredTimeInDayError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="userAccessTokenHttpOnly" class="col-md-4 col-form-label">
                    [[#{http_only}]]
                </label>
                <div class="col-md-8 d-flex align-items-center">
                    <input type="checkbox" name="userAccessTokenHttpOnly" id="userAccessTokenHttpOnly" class="form-check wh-1rem"
                           th:value="${userAccessTokenHttpOnly}"
                           th:checked="${userAccessTokenHttpOnly}"
                           onchange="ezyadmin.changeUserAccessTokenHttpOnly(this);">
                </div>
            </div>
            <div class="form-group row">
                <label for="currentEncryptionKey" class="col-md-4 col-form-label">
                    [[#{current_encryption_key}]]
                </label>
                <div class="col-md-6 d-flex">
                    <input type="text" name="currentEncryptionKey" id="currentEncryptionKey" class="form-control"
                           value="************" disabled>
                    <button type="button" class="btn btn-info ml-1 white-space-nowrap"
                            id="showEncryptionKeyButton"
                            onclick="ezyadmin.showEncryptionKey();">
                        [[#{show}]]
                    </button>
                    <button type="button" class="btn btn-secondary ml-1 white-space-nowrap d-none"
                            id="hideEncryptionKeyButton"
                            onclick="ezyadmin.hideEncryptionKey();">
                        [[#{hide}]]
                    </button>
                    <button type="button" class="btn btn-primary ml-1 white-space-nowrap"
                            id="changeEncryptionKeyButton"
                            onclick="ezyadmin.showChangeEncryptionKeyComponents();">
                        [[#{change}]]
                    </button>
                </div>
                <div class="col-md-2"></div>
            </div>
            <div class="d-none" id="changeEncryptionKeyComponents">
                <div class="form-group row">
                    <label for="newEncryptionKey" class="col-md-3 col-form-label">
                        [[#{new_encryption_key}]] (<span class="text-danger">*</span>)
                    </label>
                    <div class="col-md-6">
                        <input type="text" name="newEncryptionKey" id="newEncryptionKey"
                               class="form-control" th:placeholder="#{new_encryption_key}">
                    </div>
                    <label id="newEncryptionKeyErrorLabel" class="col-md-3 col-form-label text-danger d-none" for="newEncryptionKey">
                        <i class="far fa-times-circle"></i> <span id="newEncryptionKeyError">[[#{invalid}]]</span>
                    </label>
                </div>
                <div class="form-group row">
                    <label class="col-md-3 col-form-label">
                    </label>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <button type="button" id="randomEncryptionKeyButton" class="btn btn-outline-primary pt-1 pb-1"
                                    onclick="ezyadmin.onRandomEncryptionKeyClick();">
                                [[#{random}]]
                            </button>
                            <span class="ml-2" id="randomEncryptionKey"></span>
                        </div>
                    </div>
                    <div class="col-md-3"></div>
                </div>
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-9">
                        <button type="button" class="btn btn-primary pl-4 pr-4" onclick="ezyadmin.changeEncryptionKey();">
                            [[#{submit}]]
                        </button>
                        <button type="button" class="btn btn-secondary pl-4 pr-4" onclick="ezyadmin.cancelChangeEncryptionKey();">
                            [[#{cancel}]]
                        </button>
                    </div>
                    <!-- /.col -->
                </div>
            </div>
        </form>
    </div>
    <div class="col-lg-2"></div>
    <div class="col-12">
        <hr class="mb-4" />
    </div>
    <div class="col-12">
        <div class="d-flex">
            <h3>[[#{languages}]]</h3>
            <button th:if="${adminRoles.isAccessible('/api/v1/web-languages/add', 'POST')}"
                    class="btn btn-outline-primary button-next-to-title"
                    onclick="ezyadmin.showAddNewWebLanguageModal();">
                [[#{add_new}]] <i class="fas fa-plus-circle"></i>
            </button>
        </div>
    </div>
    <div class="col-lg-10 mt-3">
        <table id="webLanguageList" class="table table-bordered table-hover bg-white">
            <thead>
            <tr>
                <th>#</th>
                <th>[[#{code}]]</th>
                <th>[[#{name}]]</th>
                <th>[[#{flag}]]</th>
                <th>[[#{display_order}]]</th>
                <th>[[#{active}]]</th>
                <th>[[#{default}]]</th>
                <th>[[#{actions}]]</th>
            </tr>
            </thead>
            <tbody id="webLanguageListBody">
            <tr th:each="webLanguage, iterator : ${webLanguages}">
                <td>[[${iterator.index + 1}]]</td>
                <td>[[${webLanguage.code}]]</td>
                <td>[[${webLanguage.name}]]</td>
                <td><i th:class="${webLanguage.flag}"></i></td>
                <td>[[${webLanguage.displayOrder}]]</td>
                <td>[[#{${webLanguage.active}}]]</td>
                <td th:if="${webLanguage.code == defaultWebLanguage}" class="text-success">
                    [[#{default}]]
                </td>
                <td th:if="${webLanguage.active && webLanguage.code != defaultWebLanguage}">
                    <a th:if="${adminRoles.isAccessible('/api/v1/web-languages/{code}/set-as-default', 'PUT')}"
                       class="text-primary cursor-pointer"
                       th:attr="onclick=|ezyadmin.setDefaultWebLanguage('${webLanguage.code}')|">
                        [[#{set_as}]]
                    </a>
                </td>
                <td th:if="${!webLanguage.active}">
                </td>
                <td>
                    <a th:if="${adminRoles.isAccessible('/api/v1/web-languages/{code}', 'PUT')}"
                       th:attr="onclick=|ezyadmin.showEditNewWebLanguageModal(
                            '${webLanguage.code}',
                            '${webLanguage.name}',
                            '${webLanguage.flag}',
                            ${webLanguage.displayOrder},
                            ${webLanguage.active}
                           )|" class="text-primary pr-1">
                        <i class="fas fa-edit"></i>
                    </a>
                    <a th:if="${adminRoles.isAccessible('/api/v1/web-languages/{code}', 'DELETE')}"
                       th:attr="onclick=|ezyadmin.deleteWebLanguage('${webLanguage.code}')|" class="text-danger">
                        <i class="fas fa-trash"></i>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="col-lg-2"></div>
    <div class="col-12">
        <hr class="mb-4" />
    </div>
    <div class="col-12">
        <h3>[[#{datetime_format}]]</h3>
    </div>
    <div class="col-md-10">
        <form id="dateTimeFormatSettingsForm" onsubmit="return false;">
            <div class="form-group row">
                <label for="dateFormat" class="col-md-4 col-form-label">[[#{date_format}]]</label>
                <div class="col-md-6">
                    <input type="text" name="dateFormat" id="dateFormat"
                           class="form-control" th:placeholder="#{date_format}"
                           onkeydown="ezyadmin.onKeyDownToSaveDateTimeFormatSettings();"
                           th:value="${dateFormat}">
                </div>
                <label id="dateFormatErrorLabel" class="col-md-2 col-form-label text-danger d-none" for="dateFormat">
                    <i class="far fa-times-circle"></i> <span id="dateFormatError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="timeFormat" class="col-md-4 col-form-label">[[#{time_format}]]</label>
                <div class="col-md-6">
                    <input type="text" name="timeFormat" id="timeFormat"
                           class="form-control" th:placeholder="#{time_format}"
                           onkeydown="ezyadmin.onKeyDownToSaveDateTimeFormatSettings();"
                           th:value="${timeFormat}">
                </div>
                <label id="timeFormatErrorLabel" class="col-md-2 col-form-label text-danger d-none" for="timeFormat">
                    <i class="far fa-times-circle"></i> <span id="timeFormatError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="dateTimeFormat" class="col-md-4 col-form-label">[[#{datetime_format}]]</label>
                <div class="col-md-6">
                    <input type="text" name="dateTimeFormat" id="dateTimeFormat"
                           class="form-control" th:placeholder="#{datetime_format}"
                           onkeydown="ezyadmin.onKeyDownToSaveDateTimeFormatSettings();"
                           th:value="${dateTimeFormat}">
                </div>
                <label id="dateTimeFormatErrorLabel" class="col-md-2 col-form-label text-danger d-none" for="dateTimeFormat">
                    <i class="far fa-times-circle"></i> <span id="dateTimeFormatError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="form-group row">
                <label for="dateMinuteFormat" class="col-md-4 col-form-label">[[#{date_minute_format}]]</label>
                <div class="col-md-6">
                    <input type="text" name="dateMinuteFormat" id="dateMinuteFormat"
                           class="form-control" th:placeholder="#{date_minute_format}"
                           onkeydown="ezyadmin.onKeyDownToSaveDateTimeFormatSettings();"
                           th:value="${dateMinuteFormat}">
                </div>
                <label id="dateMinuteFormatErrorLabel" class="col-md-2 col-form-label text-danger d-none" for="dateMinuteFormat">
                    <i class="far fa-times-circle"></i> <span id="dateMinuteFormatError">[[#{invalid}]]</span>
                </label>
            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <button th:if="${adminRoles.isAccessible('/api/v1/settings/website', 'PUT')}"
                            type="button" class="btn btn-primary btn-block" onclick="ezyadmin.saveDateTimeFormatSettings();">
                        [[#{save}]]
                    </button>
                </div>
                <div class="col-md-6"></div>
                <!-- /.col -->
            </div>
        </form>
    </div>
    <div class="col-md-2"></div>
    <div class="col-12 mb-3"></div>
    <div class="modal fade pt-4rem" id="add-web-language">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">[[#{add_new_web_language}]]</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addWebLanguageForm" onsubmit="return false;">
                        <div class="form-group row">
                            <label for="addWebLanguageCode" class="col-4 col-form-label">
                                [[#{code}]] (<span class="text-danger">*</span>)
                            </label>
                            <div class="col-8">
                                <label class="col-form-label text-danger d-none" id="addWebLanguageCodeErrorLabel" for="addWebLanguageCode">
                                    <i class="far fa-times-circle"></i> <span id="addWebLanguageCodeError"></span>
                                </label>
                                <input type="text" name="addWebLanguageCode" id="addWebLanguageCode"
                                       class="form-control" th:placeholder="#{code}"
                                       onkeydown="ezyadmin.onKeyDownToSaveWebLanguage('add')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="addWebLanguageName" class="col-4 col-form-label">
                                [[#{name}]] (<span class="text-danger">*</span>)
                            </label>
                            <div class="col-8">
                                <label class="col-form-label text-danger d-none" id="addWebLanguageNameErrorLabel" for="addWebLanguageName">
                                    <i class="far fa-times-circle"></i> <span id="addWebLanguageNameError"></span>
                                </label>
                                <input type="text" name="addWebLanguageName" id="addWebLanguageName"
                                       class="form-control" th:placeholder="#{name}"
                                       onkeydown="ezyadmin.onKeyDownToSaveWebLanguage('add')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="addWebLanguageFlag" class="col-4 col-form-label">
                                [[#{flag}]] (<span class="text-danger">*</span>)
                            </label>
                            <div class="col-8">
                                <label class="col-form-label text-danger d-none" id="addWebLanguageFlagErrorLabel" for="addWebLanguageFlag">
                                    <i class="far fa-times-circle"></i> <span id="addWebLanguageFlagError"></span>
                                </label>
                                <input type="text" name="addWebLanguageFlag" id="addWebLanguageFlag"
                                       class="form-control" th:placeholder="#{example} + ': fi fi-gb'"
                                       onkeydown="ezyadmin.onKeyDownToSaveWebLanguage('add')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="addWebLanguageDisplayOrder" class="col-4 col-form-label">
                                [[#{display_order}]]
                            </label>
                            <div class="col-8">
                                <label class="col-form-label text-danger d-none" id="addWebLanguageDisplayOrderErrorLabel" for="addWebLanguageDisplayOrder">
                                    <i class="far fa-times-circle"></i> <span id="addWebLanguageDisplayOrderError"></span>
                                </label>
                                <input type="text" name="addWebLanguageDisplayOrder" id="addWebLanguageDisplayOrder"
                                       class="form-control" th:placeholder="#{display_order}"
                                       onkeydown="ezyadmin.onKeyDownToSaveWebLanguage('add')">
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <label for="addWebLanguageActive" class="col-4 col-form-label">[[#{active}]]</label>
                            <div class="col-8 d-flex align-items-center">
                                <input type="checkbox" name="addWebLanguageActive" id="addWebLanguageActive" class="wh-1rem">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-between">
                    <div>
                        <button type="button" class="btn btn-default" data-dismiss="modal"
                                onclick="ezyadmin.resetAddWebLanguageModal();">[[#{cancel}]]</button>
                        <button type="button" class="btn btn-default ml-2"
                                onclick="ezyadmin.resetAddWebLanguageModal();">[[#{reset}]]</button>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="ezyadmin.addWebLanguage();">[[#{add}]]</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade pt-4rem" id="edit-web-language">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">[[#{edit_language}]]</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="editWebLanguageForm" onsubmit="return false;">
                        <div class="form-group row">
                            <label for="editWebLanguageCode" class="col-4 col-form-label">
                                [[#{code}]] (<span class="text-danger">*</span>)
                            </label>
                            <div class="col-8">
                                <label class="col-form-label text-danger d-none" id="editWebLanguageCodeErrorLabel" for="editWebLanguageCode">
                                    <i class="far fa-times-circle"></i> <span id="editWebLanguageCodeError"></span>
                                </label>
                                <input type="text" name="editWebLanguageCode" id="editWebLanguageCode"
                                       class="form-control" th:placeholder="#{code}" disabled>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="editWebLanguageName" class="col-4 col-form-label">
                                [[#{name}]] (<span class="text-danger">*</span>)
                            </label>
                            <div class="col-8">
                                <label class="col-form-label text-danger d-none" id="editWebLanguageNameErrorLabel" for="editWebLanguageName">
                                    <i class="far fa-times-circle"></i> <span id="editWebLanguageNameError"></span>
                                </label>
                                <input type="text" name="editWebLanguageName" id="editWebLanguageName"
                                       class="form-control" th:placeholder="#{name}"
                                       onkeydown="ezyadmin.onKeyDownToSaveWebLanguage('edit')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="editWebLanguageFlag" class="col-4 col-form-label">
                                [[#{flag}]] (<span class="text-danger">*</span>)
                            </label>
                            <div class="col-8">
                                <label class="col-form-label text-danger d-none" id="editWebLanguageFlagErrorLabel" for="editWebLanguageFlag">
                                    <i class="far fa-times-circle"></i> <span id="editWebLanguageFlagError"></span>
                                </label>
                                <input type="text" name="editWebLanguageFlag" id="editWebLanguageFlag" class="form-control"
                                       th:placeholder="#{example} + ': fi fi-gb'"
                                       onkeydown="ezyadmin.onKeyDownToSaveWebLanguage('edit')">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="editWebLanguageDisplayOrder" class="col-4 col-form-label">
                                [[#{display_order}]]
                            </label>
                            <div class="col-8">
                                <label class="col-form-label text-danger d-none" id="editWebLanguageDisplayOrderErrorLabel" for="editWebLanguageDisplayOrder">
                                    <i class="far fa-times-circle"></i> <span id="editWebLanguageDisplayOrderError"></span>
                                </label>
                                <input type="text" name="editWebLanguageDisplayOrder" id="editWebLanguageDisplayOrder"
                                       class="form-control" th:placeholder="#{display_order}"
                                       onkeydown="ezyadmin.onKeyDownToSaveWebLanguage('edit')">
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <label for="editWebLanguageActive" class="col-4 col-form-label">[[#{active}]]</label>
                            <div class="col-8 d-flex align-items-center">
                                <input type="checkbox" name="editWebLanguageActive" id="editWebLanguageActive" class="wh-1rem">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer justify-content-between">
                    <div>
                        <button type="button" class="btn btn-default" data-dismiss="modal">[[#{cancel}]]</button>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="ezyadmin.editWebLanguage();">[[#{edit}]]</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>

<script layout:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.messages.save_successfully = /*[[#{save_successfully}]]*/;
ezyadmin.messages.save_regular_settings_successfully = /*[[#{save_regular_settings_successfully}]]*/;
ezyadmin.messages.save_web_language_successfully = /*[[#{save_web_language_successfully}]]*/;
ezyadmin.messages.delete_web_language_successfully = /*[[#{delete_web_language_successfully}]]*/;
/*]]>*/
ezyadmin.onKeyDownToSaveWebsiteSettings = function() {
    if(event.key === 'Enter') {
    	ezyadmin.saveWebsiteSettings();
    }
}
ezyadmin.saveWebsiteSettings = function() {
    var formData = ezyadmin.formDataToObject('websiteSettingsForm');
    $.ajax({
        type: 'PUT',
        url: '/api/v1/settings/website',
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function () {
            ezyadmin.hideFormErrors(formData);
            ezyadmin.shortToast(
                'bg-success',
                ezyadmin.messages.save_successfully
            );
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors(formData, data);
        }
    });
}

// =================== regular settings ================
ezyadmin.editRegularSettings = function() {
    var formData = ezyadmin.formDataToObject('editRegularSettingsForm');
    formData.allowSearchUserByLikeOperator = $('#allowSearchUserByLikeOperator').prop('checked');
    formData.allowSearchMediaByLikeOperator = $('#allowSearchMediaByLikeOperator').prop('checked');
    formData.allowReplaceMedia = $('#allowReplaceMedia').prop('checked');
    formData.allowReduceMediaFileSize = $('#allowReduceMediaFileSize').prop('checked');
    formData.allowPermanentlyDeleteMedia = $('#allowPermanentlyDeleteMedia').prop('checked');
    $.ajax({
        type: 'PUT',
        url: '/api/v1/settings/website/regular',
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function () {
            ezyadmin.hideFormErrors(formData);
            ezyadmin.shortToast(
                'bg-success',
                ezyadmin.messages.save_regular_settings_successfully
            );
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors(formData, data);
        }
    });
}

// ========== access token =============
ezyadmin.onKeyDownToEditUserTokenExpirationTimeSetting = function(e) {
    var value = $(e).val();
    $.ajax({
        type: 'PUT',
        url: '/api/v1/settings/user-access-token-expiration-time',
        data: JSON.stringify({
            tokenExpiredTimeInDay: value
        }),
        contentType: 'application/json',
        success: function () {
            // do nothing
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors({}, data);
        }
    });
}

ezyadmin.changeUserAccessTokenHttpOnly = function(e) {
    var value = $(e).prop('checked');
    $.ajax({
        type: 'PUT',
        url: '/api/v1/settings/user-access-token-http-only',
        data: JSON.stringify({
            httpOnly: value
        }),
        contentType: 'application/json',
        success: function () {
            // do nothing
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors({}, data);
        }
    });
}

// =================== web language settings ================
ezyadmin.onKeyDownToSaveWebLanguage = function(action) {
    if(event.key === 'Enter') {
    	ezyadmin.saveWebLanguage(action);
    }
}

ezyadmin.showAddNewWebLanguageModal = function() {
    $('#add-web-language').modal('show');
}

ezyadmin.hideAddNewWebLanguageModal = function() {
    $('#add-web-language').modal('hide');
}

ezyadmin.showEditNewWebLanguageModal = function(
    code,
    name,
    flag,
    displayOrder,
    active
) {
    ezyadmin.selectedLanguageCode = code;
    $('#editWebLanguageCode').val(code);
    $('#editWebLanguageName').val(name);
    $('#editWebLanguageFlag').val(flag);
    $('#editWebLanguageDisplayOrder').val(displayOrder);
    $('#editWebLanguageActive').prop('checked', active);
    $('#edit-web-language').modal('show');
}

ezyadmin.hideEditNewWebLanguageModal = function() {
    $('#edit-web-language').modal('hide');
}

ezyadmin.resetAddWebLanguageModal = function() {
    $('#addWebLanguageCode').val('');
    $('#addWebLanguageName').val('');
    $('#addWebLanguageFlag').val('');
    $('#addWebLanguageDisplayOrder').val('');
    $('#addWebLanguageActive').prop('checked', false);
}

ezyadmin.addWebLanguage = function () {
    ezyadmin.saveWebLanguage('add');
}

ezyadmin.editWebLanguage = function () {
    ezyadmin.saveWebLanguage('edit');
}

ezyadmin.saveWebLanguage = function (action) {
    var formData = ezyadmin.formDataToObject(action + 'WebLanguageForm');
    var active = $('#' + action + 'WebLanguageActive').prop('checked');
    formData[action + 'WebLanguageActive'] = active;
    var url = action == 'add'
        ? '/api/v1/web-languages/add'
        : '/api/v1/web-languages/' + ezyadmin.selectedLanguageCode;
    ezyadmin.hideFormErrors(formData);
    $.ajax({
        type: action == 'add' ? 'POST' : 'PUT',
        url: url,
        data: JSON.stringify(formData),
        contentType: 'application/json',
    }).done(function () {
        ezyadmin.shortToast(
            'bg-success',
            ezyadmin.messages.save_web_language_successfully
        );
        location.reload();
    }).fail(function (e) {
        ezyadmin.processUpdateApiErrors(formData, e);
    });
}

ezyadmin.deleteWebLanguage = function (languageCode) {
    $.ajax({
        type: 'DELETE',
        url: '/api/v1/web-languages/' + languageCode
    }).done(function () {
        ezyadmin.shortToast(
            'bg-success',
            ezyadmin.messages.delete_web_language_successfully
        );
        location.reload();
    }).fail(function (e) {
        ezyadmin.processUpdateApiErrors({}, e);
    });
}

ezyadmin.setDefaultWebLanguage = function (languageCode) {
    $.ajax({
        type: 'PUT',
        url: '/api/v1/web-languages/' + languageCode + '/set-as-default'
    }).done(function () {
        location.reload();
    }).fail(function (e) {
        ezyadmin.processUpdateApiErrors({}, e);
    });
}

ezyadmin.createDataTable('webLanguageList');

// ========== random key =============
ezyadmin.showChangeEncryptionKeyComponents = function() {
    $('#changeEncryptionKeyButton').addClass('d-none');
    $('#changeEncryptionKeyComponents').removeClass('d-none');
}

ezyadmin.onRandomEncryptionKeyClick = function() {
	$.ajax({
        type: 'POST',
        url: '/api/v1/settings/random-aes-key',
        success: function (data) {
            $('#newEncryptionKey').val(data.encryptionKey);
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors(formData, data);
        }
    });
}

ezyadmin.cancelChangeEncryptionKey = function() {
    $('#changeEncryptionKeyButton').removeClass('d-none');
    $('#changeEncryptionKeyComponents').addClass('d-none');
}

// ========== show/hide encryption key ===============
ezyadmin.showEncryptionKey = function() {
    $.ajax({
        url: '/api/v1/settings/user-access-token-encryption-key',
        type: 'GET',
        dataType: 'json',
    })
    .done(function(data) {
		$('#currentEncryptionKey').val(data.encryptionKey);
		$('#showEncryptionKeyButton').addClass('d-none');
		$('#hideEncryptionKeyButton').removeClass('d-none');
    })
    .fail(function(e) {
    	ezyadmin.processGetApiErrors(e);
    });
}

ezyadmin.hideEncryptionKey = function() {
    $('#currentEncryptionKey').val('************');
    $('#showEncryptionKeyButton').removeClass('d-none');
    $('#hideEncryptionKeyButton').addClass('d-none');
}

// ========== change encryption key =============
ezyadmin.changeEncryptionKey = function() {
    var formData = {
        newEncryptionKey: $('#newEncryptionKey').val()
    };
    $.ajax({
        type: 'PUT',
        url: '/api/v1/settings/user-access-token-encryption-key',
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function () {
            location.reload();
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors(formData, data);
        }
    });
}

// ========== datetime format setting =============
ezyadmin.onKeyDownToSaveDateTimeFormatSettings = function() {
    if(event.key === 'Enter') {
    	ezyadmin.saveDateTimeFormatSettings();
    }
}
ezyadmin.saveDateTimeFormatSettings = function() {
    var formData = ezyadmin.formDataToObject('dateTimeFormatSettingsForm');
    $.ajax({
        type: 'PUT',
        url: '/api/v1/settings/web-datetime-formats',
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function () {
            ezyadmin.shortToast(
                'bg-success',
                ezyadmin.messages.save_successfully
            );
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors({}, data);
        }
    });
}
</script>
</body>
</html>
