{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/admin-site-config.css"}}">


{{template "admin-hero-styles" .}}

<div class="sitecfg-page">

    <details class="admin-hero">

        <summary class="admin-hero-bar">

            <span class="admin-hero-icon" aria-hidden="true"><i class='bx bx-cog'></i></span>

            <span class="admin-hero-intro">{{T "admin_site_config_hint"}}</span>

            <span class="admin-hero-toggle">

                <span class="admin-hero-toggle-label"><i class='bx bx-info-circle' aria-hidden="true"></i> {{T "admin_usage_title"}}</span>

                {{template "admin-hero-help-meta" .}}

            </span>

        </summary>

        <div class="admin-hero-body">

                <ul class="admin-hero-field-grid">

                    <li class="admin-hero-field-item"><strong>{{T "admin_site_config_usage_basic"}}</strong>{{T "admin_site_config_usage_basic_desc"}}</li>

                    <li class="admin-hero-field-item"><strong>{{T "admin_site_config_usage_logo"}}</strong>{{T "admin_site_config_usage_logo_desc"}}</li>

                    <li class="admin-hero-field-item"><strong>{{T "admin_site_config_usage_embed"}}</strong>{{T "admin_site_config_usage_embed_desc"}}</li>

                    <li class="admin-hero-field-item"><strong>{{T "admin_site_config_usage_security"}}</strong>{{T "admin_site_config_usage_security_desc"}}</li>

                    <li class="admin-hero-field-item"><strong>{{T "admin_site_config_locale"}}</strong>{{T "admin_site_config_default_lang_desc"}}</li>

                </ul>

                <div class="admin-hero-tip">

                    <i class='bx bx-bulb'></i>

                    <strong>{{T "admin_doc_config_note"}}</strong> {{T "admin_doc_config_note_save"}}

                </div>

        </div>

    </details>

    <form id="siteConfigForm">

        <div class="sitecfg-grid">

            <!-- 站点信息 -->

            <div class="sitecfg-section">

                <div class="section-head">

                    <span class="icon-chip"><i class='bx bx-globe'></i></span>

                    <div>

                        <h2 class="section-title">{{T "admin_site_config_basic"}}</h2>

                        <p class="section-desc">{{T "admin_site_config_name_desc"}}</p>

                    </div>

                </div>

                <div class="section-body">

                    <div class="sitecfg-fields">

                        <div class="sitecfg-field">

                            <label class="form-label" for="siteName">{{T "admin_site_config_name"}} <span class="text-danger">*</span></label>

                            <input type="text" class="form-control" id="siteName" name="name" required placeholder="{{T "admin_site_config_name"}}" />

                            <div class="form-text">{{T "admin_site_config_name_desc"}}</div>

                        </div>

                        <div class="sitecfg-field">

                            <label class="form-label">{{T "admin_site_config_logo"}}</label>

                            <div class="logo-controls">

                                <div class="logo-type-tabs" role="group" aria-label="{{T "admin_site_config_logo"}}">

                                    <button type="button" class="btn active" id="logoTypeText" data-logo-type="text">{{T "admin_site_config_logo_type_text"}}</button>

                                    <button type="button" class="btn" id="logoTypeImage" data-logo-type="image">{{T "admin_site_config_logo_type_image"}}</button>

                                </div>

                                <input type="hidden" id="logoType" value="text" />

                                <input type="hidden" id="siteLogoImage" value="" />

                                <div id="logoTextPanel">

                                    <input type="text" class="form-control" id="siteLogo" name="logo" placeholder="{{T "admin_site_config_logo_text_desc"}}" />

                                    <div class="form-text">{{T "admin_site_config_logo_text_desc"}}</div>

                                    <div class="logo-icon-field">

                                        <label class="form-label" for="siteLogoIcon">{{T "admin_site_config_logo_icon"}}</label>

                                        <div class="logo-icon-input-group">

                                            <span class="logo-icon-live" id="logoIconLive"><i class='bx bx-book' id="logoIconLiveI"></i></span>

                                            <input type="text" class="form-control" id="siteLogoIcon" name="logo_icon" placeholder="{{T "admin_site_config_logo_icon_placeholder"}}" value="bx-book" />

                                        </div>

                                        <div class="logo-icon-presets" id="logoIconPresets">

                                            <button type="button" class="btn active" data-icon="bx-book" title="bx-book"><i class='bx bx-book'></i></button>

                                            <button type="button" class="btn" data-icon="bx-book-open" title="bx-book-open"><i class='bx bx-book-open'></i></button>

                                            <button type="button" class="btn" data-icon="bx-file" title="bx-file"><i class='bx bx-file'></i></button>

                                            <button type="button" class="btn" data-icon="bx-file-blank" title="bx-file-blank"><i class='bx bx-file-blank'></i></button>

                                            <button type="button" class="btn" data-icon="bx-folder" title="bx-folder"><i class='bx bx-folder'></i></button>

                                            <button type="button" class="btn" data-icon="bx-code-alt" title="bx-code-alt"><i class='bx bx-code-alt'></i></button>

                                            <button type="button" class="btn" data-icon="bx-cube" title="bx-cube"><i class='bx bx-cube'></i></button>

                                            <button type="button" class="btn" data-icon="bx-grid-alt" title="bx-grid-alt"><i class='bx bx-grid-alt'></i></button>

                                            <button type="button" class="btn" data-icon="bx-home-alt" title="bx-home-alt"><i class='bx bx-home-alt'></i></button>

                                            <button type="button" class="btn" data-icon="bx-layer" title="bx-layer"><i class='bx bx-layer'></i></button>

                                        </div>

                                        <div class="form-text">{{T "admin_site_config_logo_icon_desc"}}</div>

                                        <div class="logo-icon-color-field">

                                            <label class="form-label" for="siteLogoIconColor">{{T "admin_site_config_logo_icon_color"}}</label>

                                            <div class="logo-color-input-group">

                                                <span class="logo-color-picker-wrap">

                                                    <input type="color" class="logo-color-picker" id="siteLogoIconColorPicker" value="#2563eb" title="{{T "admin_site_config_logo_icon_color"}}" />

                                                </span>

                                                <input type="text" class="form-control" id="siteLogoIconColor" name="logo_icon_color" placeholder="{{T "admin_site_config_logo_icon_color_placeholder"}}" value="#2563eb" maxlength="7" />

                                            </div>

                                            <div class="logo-color-presets" id="logoColorPresets">

                                                <button type="button" class="btn active" data-color="#2563eb" title="#2563eb" style="background:#2563eb"></button>

                                                <button type="button" class="btn" data-color="#0ea5e9" title="#0ea5e9" style="background:#0ea5e9;"></button>

                                                <button type="button" class="btn" data-color="#10b981" title="#10b981" style="background:#10b981;"></button>

                                                <button type="button" class="btn" data-color="#f59e0b" title="#f59e0b" style="background:#f59e0b;"></button>

                                                <button type="button" class="btn" data-color="#ef4444" title="#ef4444" style="background:#ef4444;"></button>

                                                <button type="button" class="btn" data-color="#8b5cf6" title="#8b5cf6" style="background:#8b5cf6;"></button>

                                                <button type="button" class="btn" data-color="#ec4899" title="#ec4899" style="background:#ec4899;"></button>

                                                <button type="button" class="btn" data-color="#64748b" title="#64748b" style="background:#64748b;"></button>

                                            </div>

                                            <div class="form-text">{{T "admin_site_config_logo_icon_color_desc"}}</div>

                                        </div>

                                    </div>

                                </div>

                                <div id="logoImagePanel" style="display:none;">

                                    <div class="logo-image-actions">

                                        <button type="button" class="btn btn-outline-primary btn-sm" id="btnUploadLogo"><i class='bx bx-upload'></i> {{T "admin_site_config_logo_upload"}}</button>

                                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnRemoveLogo" style="display:none;"><i class='bx bx-trash'></i> {{T "admin_site_config_logo_remove"}}</button>

                                        <input type="file" id="logoFileInput" accept=".png,.jpg,.jpeg,.gif,.webp,.svg,image/*" style="display:none;" />

                                    </div>

                                    <div class="form-text">{{T "admin_site_config_logo_image_desc"}}</div>

                                </div>

                                <div class="logo-preview-wrap">

                                    <span class="logo-preview-label">{{T "admin_site_config_logo_preview"}}</span>

                                    <div class="logo-preview-box" id="logoPreviewBox">

                                        <span class="logo-preview-icon-wrap" id="logoPreviewIconWrap"><i class='bx bx-book' id="logoPreviewIcon"></i></span>

                                        <span class="logo-preview-text" id="logoPreview">—</span>

                                        <img class="logo-preview-img" id="logoPreviewImg" alt="logo" />

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="sitecfg-field">

                            <label class="form-label" for="siteKeywords">{{T "admin_site_config_keywords"}}</label>

                            <input type="text" class="form-control" id="siteKeywords" name="keywords" maxlength="256" placeholder="{{T "admin_site_config_keywords_placeholder"}}">

                            <div class="form-text">{{T "admin_site_config_keywords_desc"}}</div>

                        </div>

                        <div class="sitecfg-field">

                            <label class="form-label" for="siteDescription">{{T "admin_site_config_description"}}</label>

                            <textarea class="form-control" id="siteDescription" name="description" rows="4" maxlength="512" placeholder="{{T "admin_site_config_description_desc"}}"></textarea>

                            <div class="form-text">{{T "admin_site_config_description_desc"}}</div>

                        </div>

                        <div class="sitecfg-field">

                            <label class="form-label" for="homeTitle">{{T "admin_site_config_home_title"}}</label>

                            <input type="text" class="form-control" id="homeTitle" name="home_title" maxlength="128" placeholder="{{T "admin_site_config_home_title_placeholder"}}" />

                            <div class="form-text">{{T "admin_site_config_home_title_desc"}}</div>

                        </div>

                        <div class="sitecfg-field">

                            <label class="form-label" for="homeSubtitle">{{T "admin_site_config_home_subtitle"}}</label>

                            <textarea class="form-control" id="homeSubtitle" name="home_subtitle" rows="3" maxlength="512" placeholder="{{T "admin_site_config_home_subtitle_placeholder"}}"></textarea>

                            <div class="form-text">{{T "admin_site_config_home_subtitle_desc"}}</div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- 页面嵌入代码 -->

            <div class="sitecfg-section">

                <div class="section-head">

                    <span class="icon-chip"><i class='bx bx-code-alt'></i></span>

                    <div>

                        <h2 class="section-title">{{T "admin_site_config_embed"}}</h2>

                        <p class="section-desc">{{T "admin_site_config_embed_desc"}}</p>

                    </div>

                </div>

                <div class="section-body">

                    <div class="sitecfg-fields">

                        <div class="sitecfg-field sitecfg-field--full">

                            <label class="form-label" for="customMetaHtml">{{T "admin_site_config_custom_meta_html"}}</label>

                            <textarea class="form-control font-monospace" id="customMetaHtml" name="custom_meta_html" rows="5" spellcheck="false" placeholder="{{T "admin_site_config_custom_meta_html_placeholder"}}"></textarea>

                            <div class="form-text">{{T "admin_site_config_custom_meta_html_desc"}}</div>

                        </div>

                        <div class="sitecfg-field sitecfg-field--full">

                            <label class="form-label" for="customFooterHtml">{{T "admin_site_config_custom_footer_html"}}</label>

                            <textarea class="form-control font-monospace" id="customFooterHtml" name="custom_footer_html" rows="6" spellcheck="false" placeholder="{{T "admin_site_config_custom_footer_html_placeholder"}}"></textarea>

                            <div class="form-text">{{T "admin_site_config_custom_footer_html_desc"}}</div>

                        </div>

                    </div>

                </div>

            </div>

            {{if .IsPro}}
            <div class="sitecfg-section">
                <div class="section-head">
                    <span class="icon-chip"><i class='bx bx-copyright'></i></span>
                    <div>
                        <h2 class="section-title">{{T "admin_site_config_footer_brand"}}</h2>
                        <p class="section-desc">{{T "admin_site_config_footer_brand_desc"}}</p>
                    </div>
                </div>
                <div class="section-body">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="footerShowDevVersion" value="1">
                        <label class="form-check-label" for="footerShowDevVersion">{{T "admin_site_config_footer_show_dev"}}</label>
                    </div>
                </div>
            </div>
            {{end}}

            <!-- 安全与密钥 -->

            <div class="sitecfg-section">

                <div class="section-head">

                    <span class="icon-chip"><i class='bx bx-key'></i></span>

                    <div>

                        <h2 class="section-title">{{T "admin_site_config_security"}}</h2>

                        <p class="section-desc">{{T "admin_site_config_token_secret_desc"}}</p>

                    </div>

                </div>

                <div class="section-body">

                    <div class="sitecfg-fields">

                        <div class="sitecfg-field">

                            <label class="form-label" for="tokenSecret">{{T "admin_site_config_token_secret"}} <span class="text-danger">*</span></label>

                            <div class="input-group secret-input-group">

                                <input type="password" class="form-control" id="tokenSecret" name="secret" autocomplete="new-password" required />

                                <button type="button" class="btn btn-outline-secondary" id="btnToggleSecret" title="{{T "admin_site_config_show_secret"}}"><i class='bx bx-show'></i></button>

                                <button type="button" class="btn btn-outline-primary" id="btnGenSecret"><i class='bx bx-refresh'></i> {{T "admin_site_config_gen_secret"}}</button>

                            </div>

                        </div>

                        <div class="sitecfg-field">

                            <label class="form-label" for="tokenExpire">{{T "admin_site_config_token_expire"}}</label>

                            <div class="input-group">

                                <input type="number" class="form-control" id="tokenExpire" name="expire" min="60" step="60" value="3600" />

                                <span class="input-group-text">{{T "admin_site_config_seconds"}}</span>

                            </div>

                            <div class="form-text">{{T "admin_site_config_token_expire_desc"}}</div>

                        </div>

                        <div class="sitecfg-tip">

                            <i class='bx bx-error-circle'></i>

                            <span>{{T "admin_site_config_token_secret_desc"}}</span>

                        </div>

                    </div>

                </div>

            </div>

            <!-- 语言 & 管理员 -->

            <div class="sitecfg-section">

                <div class="section-head">

                    <span class="icon-chip"><i class='bx bx-world'></i></span>

                    <div>

                        <h2 class="section-title">{{T "admin_site_config_locale"}}</h2>

                        <p class="section-desc">{{T "admin_site_config_default_lang_desc"}}</p>

                    </div>

                </div>

                <div class="section-body">

                    <div class="sitecfg-fields">

                        <div class="sitecfg-field">

                            <label class="form-label" for="defaultLang">{{T "admin_site_config_default_lang"}}</label>

                            <select class="form-select sitecfg-select-fit" id="defaultLang" name="default_lang"></select>

                        </div>

                        <div class="sitecfg-field">

                            <div class="sitecfg-switch-box">

                                <div class="form-check form-switch">

                                    <input class="form-check-input" type="checkbox" id="langEnableSwitch" name="enable_switch" />

                                    <label class="form-check-label" for="langEnableSwitch">{{T "admin_site_config_lang_switch"}}</label>

                                </div>

                                <div class="form-text mb-0">{{T "admin_site_config_lang_switch_desc"}}</div>

                            </div>

                        </div>

                        <div class="sitecfg-field">

                            <label class="form-label">{{T "admin_site_config_admin_user"}}</label>

                            <input type="text" class="form-control field-readonly" id="adminUsername" readonly disabled />

                            <div class="form-text">{{T "admin_site_config_admin_user_desc"}}</div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div id="admin-oauth-bind">{{template "public/oauth_bind_card" .}}</div>

        <div class="sitecfg-save-bar">

            <p class="sitecfg-save-hint mb-0"><i class='bx bx-info-circle'></i> {{T "admin_doc_config_note_save"}}</p>

            <button type="submit" class="btn btn-primary">

                <i class='bx bx-save'></i> {{T "admin_site_config_save"}}

            </button>

        </div>

    </form>

</div>

{{end}}

{{define "scripts"}}

<script>

var SiteConfigI18n = {

    loadFailed: {{json (T "admin_site_config_load_failed")}},

    saved: {{json (T "admin_site_config_saved")}},

    nameRequired: {{json (T "admin_site_config_name_required")}},

    secretRequired: {{json (T "admin_site_config_secret_required")}},

    secretTooShort: {{json (T "admin_site_config_secret_too_short")}},

    showSecret: {{json (T "admin_site_config_show_secret")}},

    hideSecret: {{json (T "admin_site_config_hide_secret")}},

    genFailed: {{json (T "admin_site_config_gen_failed")}},

    logoUploadFailed: {{json (T "admin_site_config_logo_upload_failed")}},

    logoRequired: {{json (T "admin_site_config_logo_required")}}

};

</script>

<script>

var siteConfigData = null;

var secretVisible = false;

function currentLogoType() {

    return $('#logoType').val() === 'image' ? 'image' : 'text';

}

function normalizeLogoIcon(icon) {

    icon = (icon || '').trim().toLowerCase();

    if (!icon) return 'bx-book';

    var parts = icon.split(/\s+/);

    if (parts.length >= 2 && parts[0] === 'bx') icon = parts[parts.length - 1];

    else if (parts.length > 1) icon = parts[parts.length - 1];

    if (!/^bx[sl]?-[a-z0-9-]+$/.test(icon)) return 'bx-book';

    return icon;

}

function currentLogoIcon() {

    return normalizeLogoIcon($('#siteLogoIcon').val());

}

function normalizeLogoIconColor(color) {

    color = (color || '').trim();

    if (!color) return '#2563eb';

    if (color.charAt(0) !== '#') color = '#' + color;

    if (!/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)) return '#2563eb';

    if (color.length === 4) {

        color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];

    }

    return color.toLowerCase();

}

function currentLogoIconColor() {

    return normalizeLogoIconColor($('#siteLogoIconColor').val());

}

function applyLogoIconColor(color) {

    color = normalizeLogoIconColor(color);

    $('#logoTextPanel, #logoPreviewBox').css('--logo-icon-color', color);

}

function setLogoIconColor(color, syncInput) {

    color = normalizeLogoIconColor(color);

    if (syncInput !== false) {

        $('#siteLogoIconColor').val(color);

        $('#siteLogoIconColorPicker').val(color);

    } else {

        if (/^#[0-9a-fA-F]{6}$/.test(color)) {

            $('#siteLogoIconColorPicker').val(color);

        }

    }

    applyLogoIconColor(color);

    $('#logoColorPresets .btn').each(function() {

        $(this).toggleClass('active', normalizeLogoIconColor($(this).attr('data-color')) === color);

    });

}

function setLogoIcon(icon, syncInput) {

    icon = normalizeLogoIcon(icon);

    if (syncInput !== false) $('#siteLogoIcon').val(icon);

    $('#logoIconLiveI').attr('class', 'bx ' + icon);

    $('#logoPreviewIcon').attr('class', 'bx ' + icon);

    $('#logoIconPresets .btn').each(function() {

        $(this).toggleClass('active', $(this).attr('data-icon') === icon);

    });

}

function setLogoType(type) {

    type = type === 'image' ? 'image' : 'text';

    $('#logoType').val(type);

    $('#logoTypeText').toggleClass('active', type === 'text');

    $('#logoTypeImage').toggleClass('active', type === 'image');

    $('#logoTextPanel').toggle(type === 'text');

    $('#logoImagePanel').toggle(type === 'image');

    updateLogoPreview();

}

function updateLogoPreview() {

    var name = $('#siteName').val().trim();

    var type = currentLogoType();

    var $box = $('#logoPreviewBox');

    var imgUrl = $('#siteLogoImage').val().trim();

    if (type === 'image' && imgUrl) {

        $box.addClass('is-image');

        $('#logoPreviewImg').attr('src', imgUrl);

        $('#btnRemoveLogo').show();

    } else {

        $box.removeClass('is-image');

        $('#logoPreviewImg').attr('src', '');

        setLogoIcon(currentLogoIcon(), false);

        $('#logoPreview').text((type === 'text' ? ($('#siteLogo').val().trim() || name) : name) || '—');

        $('#btnRemoveLogo').toggle(type === 'image' && !!imgUrl);

    }

}

function uploadLogoImage(file) {

    if (!file) return;

    var formData = new FormData();

    formData.append('logo', file);

    var loadId = BootstrapModal.load();

    $.ajax({

        url: '/admin/site-config-logo-upload',

        type: 'POST',

        data: formData,

        processData: false,

        contentType: false,

        success: function(res) {

            BootstrapModal.close(loadId);

            if (res.success && res.data && res.data.logo) {

                $('#siteLogoImage').val(res.data.logo);

                setLogoType('image');

            } else {

                BootstrapModal.msg((res && res.message) || SiteConfigI18n.logoUploadFailed, {icon: 2});

            }

        },

        error: function() {

            BootstrapModal.close(loadId);

            BootstrapModal.msg(SiteConfigI18n.logoUploadFailed, {icon: 2});

        }

    });

}

function fitSelectToText(sel) {

    var $sel = $(sel);

    if (!$sel.length) return;

    var longest = '';

    $sel.find('option').each(function() {

        var text = ($(this).text() || '').trim();

        if (text.length > longest.length) longest = text;

    });

    if (!longest) {

        $sel.css('width', '');

        return;

    }

    var $probe = $('<span></span>').css({

        position: 'absolute',

        visibility: 'hidden',

        whiteSpace: 'nowrap',

        font: $sel.css('font'),

        fontSize: $sel.css('font-size'),

        fontWeight: $sel.css('font-weight'),

        letterSpacing: $sel.css('letter-spacing'),

        padding: '0'

    }).text(longest).appendTo(document.body);

    // 预留下拉箭头与左右内边距

    var width = Math.ceil($probe.outerWidth()) + 52;

    $probe.remove();

    $sel.css('width', width + 'px');

}

function langOptionLabel(lang) {
    var code = String(lang || '').toLowerCase();
    if (code === 'zh-cn') return '简体中文 (zh-cn)';
    if (code === 'en') return 'English (en)';
    if (code === 'zh-tw') return '繁體中文 (zh-tw)';
    if (code === 'zh-hk') return '繁體中文 (zh-hk)';
    return code + ' (' + code + ')';
}

function renderLangOptions(available, selected) {

    var $sel = $('#defaultLang');

    $sel.empty();

    (available || []).forEach(function(lang) {
        var label = langOptionLabel(lang);
        $sel.append('<option value="' + lang + '"' + (lang === selected ? ' selected' : '') + '>' + label + '</option>');
    });

    fitSelectToText($sel);

}

function loadSiteConfig() {

    var loadId = BootstrapModal.load();

    $.get('/admin/site-config-get', function(res) {

        BootstrapModal.close(loadId);

        if (!res.success) {

            BootstrapModal.msg(SiteConfigI18n.loadFailed + ': ' + res.message, {icon: 2});

            return;

        }

        siteConfigData = res.data.config || {};

        var app = siteConfigData.app || {};

        var token = siteConfigData.token || {};

        var lang = siteConfigData.language || {};

        var admin = siteConfigData.admin || {};

        $('#siteName').val(app.name || '');

        $('#siteKeywords').val(app.keywords || '');

        $('#siteDescription').val(app.description || '');

        $('#homeTitle').val(app.home_title || '');

        $('#homeSubtitle').val(app.home_subtitle || '');

        $('#customMetaHtml').val(app.custom_meta_html || '');

        $('#customFooterHtml').val(app.custom_footer_html || '');

        if ($('#footerShowDevVersion').length) {
            $('#footerShowDevVersion').prop('checked', app.footer_show_dev_version !== false);
        }

        $('#tokenSecret').val(token.secret || '');

        $('#tokenExpire').val(token.expire || 3600);

        $('#adminUsername').val(admin.username || '');

        $('#langEnableSwitch').prop('checked', !!lang.enable_switch);

        var logoType = app.logo_type === 'image' ? 'image' : 'text';

        if (logoType === 'image') {

            $('#siteLogoImage').val(app.logo || '');

            $('#siteLogo').val('');

        } else {

            $('#siteLogo').val(app.logo || '');

            $('#siteLogoImage').val('');

        }

        setLogoIcon(app.logo_icon || 'bx-book');

        setLogoIconColor(app.logo_icon_color || '#2563eb');

        setLogoType(logoType);

        renderLangOptions(lang.available || ['en', 'zh-cn'], lang.default || 'zh-cn');

    }).fail(function() {

        BootstrapModal.close(loadId);

        BootstrapModal.msg(SiteConfigI18n.loadFailed, {icon: 2});

    });

}

function saveSiteConfig(e) {

    e.preventDefault();

    var name = $('#siteName').val().trim();

    var secret = $('#tokenSecret').val().trim();

    if (!name) {

        BootstrapModal.msg(SiteConfigI18n.nameRequired, {icon: 2});

        return;

    }

    if (!secret) {

        BootstrapModal.msg(SiteConfigI18n.secretRequired, {icon: 2});

        return;

    }

    if (secret.length < 16) {

        BootstrapModal.msg(SiteConfigI18n.secretTooShort, {icon: 2});

        return;

    }

    var logoType = currentLogoType();

    var logoVal = logoType === 'image' ? $('#siteLogoImage').val().trim() : $('#siteLogo').val().trim();

    if (logoType === 'image' && !logoVal) {

        BootstrapModal.msg(SiteConfigI18n.logoRequired, {icon: 2});

        return;

    }

    var appPayload = {

            name: name,

            logo_type: logoType,

            logo: logoVal,

            logo_icon: currentLogoIcon(),

            logo_icon_color: currentLogoIconColor(),

            description: $('#siteDescription').val().trim(),

            home_title: $('#homeTitle').val().trim(),

            home_subtitle: $('#homeSubtitle').val().trim(),

            keywords: $('#siteKeywords').val().trim(),

            custom_meta_html: $('#customMetaHtml').val().trim(),

            custom_footer_html: $('#customFooterHtml').val().trim()

        };
    if ($('#footerShowDevVersion').length) {
        appPayload.footer_show_dev_version = $('#footerShowDevVersion').is(':checked');
    }

    var payload = {

        app: appPayload,

        token: {

            secret: secret,

            expire: parseInt($('#tokenExpire').val()) || 3600

        },

        language: {

            default: $('#defaultLang').val(),

            enable_switch: $('#langEnableSwitch').is(':checked')

        }

    };

    var loadId = BootstrapModal.load();

    $.ajax({

        url: '/admin/site-config-save',

        type: 'POST',

        contentType: 'application/json',

        data: JSON.stringify(payload),

        success: function(res) {

            BootstrapModal.close(loadId);

            if (res.success) BootstrapModal.msg(SiteConfigI18n.saved, {icon: 1, callback: loadSiteConfig});

            else BootstrapModal.msg(res.message, {icon: 2});

        },

        error: function() {

            BootstrapModal.close(loadId);

            BootstrapModal.msg(AdminI18n.requestFailed, {icon: 2});

        }

    });

}

function toggleSecretVisibility() {

    secretVisible = !secretVisible;

    $('#tokenSecret').attr('type', secretVisible ? 'text' : 'password');

    $('#btnToggleSecret').html(secretVisible ? "<i class='bx bx-hide'></i>" : "<i class='bx bx-show'></i>");

    $('#btnToggleSecret').attr('title', secretVisible ? SiteConfigI18n.hideSecret : SiteConfigI18n.showSecret);

}

function generateSecret() {

    $.get('/admin/site-config-gen-secret', function(res) {

        if (res.success && res.data && res.data.secret) {

            $('#tokenSecret').val(res.data.secret).attr('type', 'text');

            secretVisible = true;

            $('#btnToggleSecret').html("<i class='bx bx-hide'></i>");

        } else {

            BootstrapModal.msg(SiteConfigI18n.genFailed, {icon: 2});

        }

    }).fail(function() {

        BootstrapModal.msg(SiteConfigI18n.genFailed, {icon: 2});

    });

}

$(document).ready(function() {

    loadSiteConfig();

    $('#siteConfigForm').on('submit', saveSiteConfig);

    $('#siteName, #siteLogo').on('input', updateLogoPreview);

    $('#siteLogoIcon').on('input', function() {

        setLogoIcon($(this).val(), false);

        updateLogoPreview();

    });

    $('#siteLogoIcon').on('blur', function() {

        setLogoIcon($(this).val());

        updateLogoPreview();

    });

    $('#logoIconPresets').on('click', '.btn', function() {

        setLogoIcon($(this).attr('data-icon'));

        updateLogoPreview();

    });

    $('#siteLogoIconColorPicker').on('input', function() {

        setLogoIconColor($(this).val());

    });

    $('#siteLogoIconColor').on('input', function() {

        setLogoIconColor($(this).val(), false);

    });

    $('#siteLogoIconColor').on('blur', function() {

        setLogoIconColor($(this).val());

    });

    $('#logoColorPresets').on('click', '.btn', function() {

        setLogoIconColor($(this).attr('data-color'));

    });

    $('#logoTypeText, #logoTypeImage').on('click', function() {

        setLogoType($(this).attr('data-logo-type'));

    });

    $('#btnUploadLogo').on('click', function() {

        $('#logoFileInput').trigger('click');

    });

    $('#logoFileInput').on('change', function() {

        var file = this.files && this.files[0];

        this.value = '';

        uploadLogoImage(file);

    });

    $('#btnRemoveLogo').on('click', function() {

        $('#siteLogoImage').val('');

        updateLogoPreview();

    });

    $('#btnToggleSecret').on('click', toggleSecretVisibility);

    $('#btnGenSecret').on('click', generateSecret);

});

</script>

{{end}}