{{define "admin/settings_system.html"}}
{{template "admin/layout_head" .}}
<link rel="stylesheet" href="{{asset "/assets/css/admin-logo.css"}}">
<div class="cs-admin-page">
{{template "admin_pagehead" (dict "Icon" "bx-cog" "Title" (T "admin.system.title") "Desc" (T "admin.system.desc"))}}
<form method="post" action="/admin/settings/system" id="system-settings-form">
  <section class="cs-admin-section">
    <div class="cs-admin-section__head">
      <div class="cs-admin-section__head-icon cs-admin-section__head-icon--indigo"><i class="bx bx-buildings"></i></div>
      <div class="cs-admin-section__head-text">
        <h2 class="cs-admin-section__head-title">{{T "admin.system.section_title"}}</h2>
        <p class="cs-admin-section__head-sub">{{T "admin.system.section_sub"}}</p>
      </div>
    </div>
    <div class="cs-admin-section__body">
      <div class="cs-admin-settings-groups">
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-text" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.system.info_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.system.info_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="row g-2">
              <div class="col-md-6 col-lg-5 cs-admin-field">
                <label class="form-label" for="app_name">{{T "admin.system.app_name"}}</label>
                <input type="text" class="form-control form-control-sm" id="app_name" name="app_name" maxlength="64" required value="{{index .Data "AppName"}}" placeholder="{{T "admin.system.app_name_ph"}}">
              </div>
              <div class="col-md-6 col-lg-5 cs-admin-field">
                <label class="form-label" for="admin_site_url">{{T "admin.system.site_url"}}</label>
                <input type="url" class="form-control form-control-sm" id="admin_site_url" name="admin_site_url" required value="{{index .Data "SiteURL"}}" placeholder="https://monitor.example.com">
                <div class="form-text mb-0">{{T "admin.system.site_url_hint"}}</div>
              </div>
              <div class="col-12 cs-admin-field">
                <label class="form-label" for="app_keywords">SEO Keywords</label>
                <input type="text" class="form-control form-control-sm" id="app_keywords" name="app_keywords" maxlength="256" value="{{index .Data "AppKeywords"}}" placeholder="{{T "admin.system.keywords_ph"}}">
                <div class="form-text mb-0">{{T "admin.system.keywords_hint"}}</div>
              </div>
              <div class="col-12 cs-admin-field">
                <label class="form-label" for="app_description">SEO Description</label>
                <textarea class="form-control form-control-sm" id="app_description" name="app_description" rows="3" maxlength="512" placeholder="{{T "admin.system.description_ph"}}">{{index .Data "AppDescription"}}</textarea>
                <div class="form-text mb-0">{{T "admin.system.description_hint"}}</div>
              </div>
              <div class="col-md-6 col-lg-4 cs-admin-field">
                <label class="form-label">{{T "admin.system.admin_user"}}</label>
                <input type="text" class="form-control form-control-sm" value="{{index .Data "AdminUsername"}}" disabled readonly>
                <div class="form-text mb-0">{{T "admin.system.admin_user_hint"}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-user-plus" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.system.register_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.system.register_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="cs-admin-field ut-admin-switch-row">
              <div class="ut-admin-switch-row__head">
                <label class="form-label mb-0" for="register_enabled">{{T "admin.system.register_enable"}}</label>
                <div class="form-check form-switch mb-0">
                  <input class="form-check-input" type="checkbox" role="switch" id="register_enabled" name="register_enabled" value="1" {{if index .Data "RegisterEnabled"}}checked{{end}} aria-label="{{T "admin.system.register_enable"}}">
                </div>
              </div>
              <div class="form-text mb-0">{{T "admin.system.register_hint"}}</div>
            </div>
          </div>
        </div>
        {{if .IsPro}}
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-copyright" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.system.footer_brand_title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.system.footer_brand_desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="cs-admin-field ut-admin-switch-row">
              <div class="ut-admin-switch-row__head">
                <label class="form-label mb-0" for="footer_show_dev_version">{{T "admin.system.footer_show_dev"}}</label>
                <div class="form-check form-switch mb-0">
                  <input class="form-check-input" type="checkbox" role="switch" id="footer_show_dev_version" name="footer_show_dev_version" value="1" {{if index .Data "FooterShowDevVersion"}}checked{{end}} aria-label="{{T "admin.system.footer_show_dev"}}">
                </div>
              </div>
              <div class="form-text mb-0">{{T "admin.system.footer_show_dev_hint"}}</div>
            </div>
          </div>
        </div>
        {{end}}
        <div class="cs-admin-settings-group">
          <div class="cs-admin-settings-group__head">
            <i class="bx bx-image" aria-hidden="true"></i>
            <div class="cs-admin-settings-group__head-text">
              <h3 class="cs-admin-settings-group__title">{{T "admin.logo.title"}}</h3>
              <p class="cs-admin-settings-group__desc">{{T "admin.logo.desc"}}</p>
            </div>
          </div>
          <div class="cs-admin-settings-group__body">
            <div class="logo-controls" id="logoControls">
              <div class="logo-type-tabs" role="group" aria-label="{{T "admin.logo.title"}}">
                <button type="button" class="btn{{if ne .LogoFormType "image"}} active{{end}}" id="logoTypeText" data-logo-type="text">{{T "admin.logo.type_text"}}</button>
                <button type="button" class="btn{{if eq .LogoFormType "image"}} active{{end}}" id="logoTypeImage" data-logo-type="image">{{T "admin.logo.type_image"}}</button>
              </div>
              <input type="hidden" id="logoType" name="logo_type" value="{{if eq .LogoFormType "image"}}image{{else}}text{{end}}">
              <div id="logoTextPanel"{{if eq .LogoFormType "image"}} style="display:none"{{end}}>
                <div class="logo-block">
                  <label class="form-label" for="siteLogo">{{T "admin.logo.text_label"}}</label>
                  <input type="text" class="form-control" id="siteLogo" name="logo" value="{{.LogoFormText}}" maxlength="64">
                </div>
                <div class="logo-block">
                  <label class="form-label" for="siteLogoIcon">{{T "admin.logo.icon_label"}}</label>
                  <div class="logo-icon-input-group">
                    <span class="logo-icon-live{{if eq .LogoIconShape "circle"}} is-circle{{end}}{{if not .LogoIcon}} is-empty{{end}}" id="logoIconLive"><i class="bx {{if .LogoIcon}}{{.LogoIcon}}{{else}}bx-hide{{end}}" id="logoIconLiveI"></i></span>
                    <input type="text" class="form-control" id="siteLogoIcon" name="logo_icon" value="{{.LogoIcon}}" placeholder="bx-radar">
                  </div>
                  <div class="logo-icon-presets" id="logoIconPresets">
                    <button type="button" class="btn" data-icon="bx-radar" title="bx-radar"><i class="bx bx-radar"></i></button>
                    <button type="button" class="btn" data-icon="bx-planet" title="bx-planet"><i class="bx bx-planet"></i></button>
                    <button type="button" class="btn" data-icon="bx-pulse" title="bx-pulse"><i class="bx bx-pulse"></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-grid-alt" title="bx-grid-alt"><i class="bx bx-grid-alt"></i></button>
                    <button type="button" class="btn" data-icon="bx-layer" title="bx-layer"><i class="bx bx-layer"></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-globe" title="bx-globe"><i class="bx bx-globe"></i></button>
                  </div>
                </div>
                <div class="logo-options-grid">
                  <div class="logo-block logo-block--compact">
                    <label class="form-label">{{T "admin.logo.shape_label"}}</label>
                    <div class="logo-icon-shape-tabs" role="group">
                      <button type="button" class="btn{{if ne .LogoIconShape "circle"}} active{{end}}" id="logoShapeSquare" data-logo-shape="square"><i class="bx bx-square-rounded"></i> {{T "admin.logo.shape_square"}}</button>
                      <button type="button" class="btn{{if eq .LogoIconShape "circle"}} active{{end}}" id="logoShapeCircle" data-logo-shape="circle"><i class="bx bx-circle"></i> {{T "admin.logo.shape_circle"}}</button>
                    </div>
                    <input type="hidden" id="siteLogoIconShape" name="logo_icon_shape" value="{{if eq .LogoIconShape "circle"}}circle{{else}}square{{end}}">
                  </div>
                  <div class="logo-block logo-block--compact">
                    <label class="form-label" for="siteLogoIconColor">{{T "admin.logo.icon_color"}}</label>
                    <div class="logo-color-input-group">
                      <span class="logo-color-picker-wrap" title="{{T "admin.logo.icon_color"}}" style="background:{{if .LogoIconColor}}{{.LogoIconColor}}{{else}}#2563eb{{end}}">
                        <input type="color" class="logo-color-picker" id="siteLogoIconColorPicker" value="{{if .LogoIconColor}}{{.LogoIconColor}}{{else}}#2563eb{{end}}" title="{{T "admin.logo.icon_color"}}" aria-label="{{T "admin.logo.icon_color"}}">
                      </span>
                      <input type="text" class="form-control" id="siteLogoIconColor" name="logo_icon_color" value="{{.LogoIconColor}}" placeholder="#2563eb" maxlength="7" spellcheck="false">
                    </div>
                    <div class="logo-color-presets" id="logoColorPresets">
                      <button type="button" class="btn" 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>
                </div>
                <div class="logo-options-grid">
                  <div class="logo-block logo-block--compact">
                    <label class="form-label" for="siteLogoIconSize">{{T "admin.logo.icon_size"}}</label>
                    <div class="logo-font-size-input-group">
                      <input type="range" class="form-range" id="siteLogoIconSizeRange" min="16" max="48" step="1" value="{{.LogoIconSize}}">
                      <input type="number" class="form-control" id="siteLogoIconSize" name="logo_icon_size" min="16" max="48" step="1" value="{{.LogoIconSize}}">
                      <span class="logo-font-size-unit">{{T "admin.logo.font_size_unit"}}</span>
                    </div>
                    <div class="form-text">{{T "admin.logo.icon_size_desc"}}</div>
                  </div>
                  <div class="logo-block logo-block--compact">
                    <label class="form-label" for="siteLogoFontSize">{{T "admin.logo.font_size"}}</label>
                    <div class="logo-font-size-input-group">
                      <input type="range" class="form-range" id="siteLogoFontSizeRange" min="12" max="36" step="1" value="{{.LogoFontSize}}">
                      <input type="number" class="form-control" id="siteLogoFontSize" name="logo_font_size" min="12" max="36" step="1" value="{{.LogoFontSize}}">
                      <span class="logo-font-size-unit">{{T "admin.logo.font_size_unit"}}</span>
                    </div>
                    <div class="form-text">{{T "admin.logo.font_size_desc"}}</div>
                  </div>
                </div>
                <div class="logo-block logo-block--compact">
                  <label class="form-label" for="siteLogoTextColor">{{T "admin.logo.text_color"}}</label>
                  <div class="logo-color-input-group">
                    <span class="logo-color-picker-wrap" title="{{T "admin.logo.text_color"}}" style="background:{{if .LogoTextColor}}{{.LogoTextColor}}{{else}}#111827{{end}}">
                      <input type="color" class="logo-color-picker" id="siteLogoTextColorPicker" value="{{if .LogoTextColor}}{{.LogoTextColor}}{{else}}#111827{{end}}" title="{{T "admin.logo.text_color"}}" aria-label="{{T "admin.logo.text_color"}}">
                    </span>
                    <input type="text" class="form-control" id="siteLogoTextColor" name="logo_text_color" value="{{.LogoTextColor}}" placeholder="{{T "admin.logo.text_color_placeholder"}}" maxlength="7" spellcheck="false">
                  </div>
                  <div class="logo-color-presets" id="logoTextColorPresets">
                    <button type="button" class="btn is-auto" data-color="" title="{{T "admin.logo.text_color_auto"}}">{{T "admin.logo.text_color_auto"}}</button>
                    <button type="button" class="btn" data-color="#111827" title="#111827" style="background:#111827"></button>
                    <button type="button" class="btn" data-color="#374151" title="#374151" style="background:#374151"></button>
                    <button type="button" class="btn" 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="#ef4444" title="#ef4444" style="background:#ef4444"></button>
                    <button type="button" class="btn" data-color="#ffffff" title="#ffffff" style="background:#ffffff"></button>
                  </div>
                  <div class="form-text">{{T "admin.logo.text_color_desc"}}</div>
                </div>
              </div>
              <div id="logoImagePanel"{{if ne .LogoFormType "image"}} style="display:none"{{end}}>
                <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.logo.upload"}}</button>
                  <button type="button" class="btn btn-outline-secondary btn-sm" id="btnRemoveLogo"{{if not .LogoFormImage}} style="display:none"{{end}}><i class="bx bx-trash"></i> {{T "admin.logo.remove"}}</button>
                  <input type="file" id="logoFileInput" accept=".png,.jpg,.jpeg,.gif,.webp,image/*" style="display:none">
                </div>
                <input type="hidden" id="siteLogoImage" value="{{.LogoFormImage}}">
                <input type="hidden" id="logoImageValue" name="logo" value="{{if eq .LogoFormType "image"}}{{.LogoFormImage}}{{end}}" disabled>
                <div class="form-text">{{T "admin.logo.image_hint"}}</div>
              </div>
              <div class="logo-preview-wrap">
                <span class="logo-preview-label">{{T "admin.logo.preview"}}</span>
                <div class="logo-preview-box{{if eq .LogoFormType "image"}} is-image{{end}}" id="logoPreviewBox">
                  <span class="logo-preview-icon-wrap{{if eq .LogoIconShape "circle"}} is-circle{{end}}{{if not .LogoIcon}} is-hidden{{end}}" id="logoPreviewIconWrap"><i class="bx {{.LogoIcon}}" id="logoPreviewIcon"></i></span>
                  <span class="logo-preview-text" id="logoPreview">{{if .LogoFormText}}{{.LogoFormText}}{{else}}—{{end}}</span>
                  <img class="logo-preview-img" id="logoPreviewImg" alt="logo"{{if .LogoFormImage}} src="{{.LogoFormImage}}"{{end}}>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="cs-admin-savebar mt-4">
    <p class="cs-admin-savebar__hint mb-0"><i class="bx bx-info-circle me-1"></i>{{T "admin.system.savebar_hint"}}</p>
    <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-save me-1"></i>{{T "admin.system.save_btn"}}</button>
  </div>
</form>
<script>
(function($){
  function logoType(){ return $('#logoType').val() === 'image' ? 'image' : 'text'; }
  function syncLogoNameField(){
    if (logoType() === 'image') {
      $('#siteLogo').prop('disabled', true).removeAttr('name');
      $('#logoImageValue').prop('disabled', false).attr('name','logo').val($('#siteLogoImage').val());
    } else {
      $('#logoImageValue').prop('disabled', true).removeAttr('name');
      $('#siteLogo').prop('disabled', false).attr('name','logo');
    }
  }
  function normalizeHex(c, fallback) {
    c = String(c || '').trim();
    if (/^#[0-9a-fA-F]{6}$/.test(c)) return c.toLowerCase();
    return fallback || '#2563eb';
  }
  function normalizeIconSize(n) {
    n = parseInt(n, 10);
    if (isNaN(n) || n <= 0) return 28;
    return Math.min(48, Math.max(16, n));
  }
  function normalizeFontSize(n) {
    n = parseInt(n, 10);
    if (isNaN(n) || n <= 0) return 16;
    return Math.min(36, Math.max(12, n));
  }
  function setLogoIconSize(n) {
    n = normalizeIconSize(n);
    $('#siteLogoIconSize').val(n);
    $('#siteLogoIconSizeRange').val(n);
    $('#logoTextPanel, #logoPreviewBox, #logoIconLive, #logoPreviewIconWrap').css('--logo-icon-size', n + 'px');
  }
  function setLogoFontSize(n) {
    n = normalizeFontSize(n);
    $('#siteLogoFontSize').val(n);
    $('#siteLogoFontSizeRange').val(n);
    $('#logoPreviewBox, #logoPreview').css('--logo-font-size', n + 'px');
  }
  function setLogoIconColor(c) {
    c = normalizeHex(c, '#2563eb');
    $('#siteLogoIconColor').val(c);
    $('#siteLogoIconColorPicker').val(c);
    $('#siteLogoIconColorPicker').closest('.logo-color-picker-wrap').css('background', c);
    $('#logoTextPanel, #logoPreviewBox').css('--logo-icon-color', c);
    $('#logoColorPresets .btn').each(function(){ $(this).toggleClass('active', normalizeHex($(this).attr('data-color'), '') === c); });
  }
  function setLogoTextColor(c) {
    c = String(c || '').trim();
    if (c && !/^#[0-9a-fA-F]{6}$/.test(c)) c = '';
    var pick = c || '#111827';
    $('#siteLogoTextColor').val(c);
    $('#siteLogoTextColorPicker').val(pick);
    $('#siteLogoTextColorPicker').closest('.logo-color-picker-wrap').css('background', pick);
    $('#logoPreview').css('--logo-text-color', pick);
    $('#logoPreviewBox').css('--logo-text-color', pick);
    $('#logoTextColorPresets .btn').each(function(){
      var dc = $(this).attr('data-color') || '';
      $(this).toggleClass('active', dc === c || (!dc && !c));
    });
  }
  function setLogoIconShape(shape) {
    shape = shape === 'circle' ? 'circle' : 'square';
    $('#siteLogoIconShape').val(shape);
    $('#logoShapeSquare').toggleClass('active', shape === 'square');
    $('#logoShapeCircle').toggleClass('active', shape === 'circle');
    $('#logoIconLive, #logoPreviewIconWrap').toggleClass('is-circle', shape === 'circle');
  }
  function setLogoIcon(icon) {
    icon = String(icon || '').trim();
    $('#siteLogoIcon').val(icon);
    var show = !!icon;
    $('#logoIconLive').toggleClass('is-empty', !show);
    $('#logoPreviewIconWrap').toggleClass('is-hidden', !show);
    $('#logoIconLiveI').attr('class', 'bx ' + (show ? icon : 'bx-hide'));
    $('#logoPreviewIcon').attr('class', 'bx ' + (show ? icon : ''));
    $('#logoIconPresets .btn').each(function(){ $(this).toggleClass('active', show && $(this).attr('data-icon') === icon); });
  }
  function updateLogoPreview() {
    var type = logoType();
    var $box = $('#logoPreviewBox');
    var imgUrl = $.trim($('#siteLogoImage').val());
    if (type === 'image' && imgUrl) {
      $box.addClass('is-image');
      $('#logoPreviewImg').attr('src', imgUrl);
      $('#btnRemoveLogo').show();
    } else {
      $box.removeClass('is-image');
      $('#logoPreviewImg').attr('src', '');
      setLogoIcon($('#siteLogoIcon').val());
      $('#logoPreview').text($.trim($('#siteLogo').val()) || '—');
      $('#btnRemoveLogo').toggle(type === 'image' && !!imgUrl);
    }
  }
  function setLogoType(t){
    t = t === 'image' ? 'image' : 'text';
    $('#logoType').val(t);
    $('#logoTypeText').toggleClass('active', t !== 'image');
    $('#logoTypeImage').toggleClass('active', t === 'image');
    $('#logoTextPanel').css('display', t === 'text' ? 'flex' : 'none');
    $('#logoImagePanel').toggle(t === 'image');
    syncLogoNameField();
    updateLogoPreview();
  }
  $('#logoTypeText,#logoTypeImage').on('click', function(){ setLogoType($(this).data('logo-type')); });
  $('#logoShapeSquare,#logoShapeCircle').on('click', function(){ setLogoIconShape($(this).data('logo-shape')); updateLogoPreview(); });
  $('#logoIconPresets').on('click', '.btn', function(){ setLogoIcon($(this).attr('data-icon')); updateLogoPreview(); });
  $('#siteLogo').on('input', updateLogoPreview);
  $('#siteLogoIcon').on('input', function(){ setLogoIcon($(this).val()); updateLogoPreview(); });
  $('#siteLogoIconColor').on('input', function(){ setLogoIconColor($(this).val()); });
  $('#siteLogoIconColorPicker').on('input change', function(){ setLogoIconColor($(this).val()); });
  $('#logoColorPresets').on('click', '.btn', function(){ setLogoIconColor($(this).attr('data-color')); });
  $('#siteLogoIconSizeRange').on('input', function(){ setLogoIconSize($(this).val()); });
  $('#siteLogoIconSize').on('input change', function(){ setLogoIconSize($(this).val()); });
  $('#siteLogoFontSizeRange').on('input', function(){ setLogoFontSize($(this).val()); });
  $('#siteLogoFontSize').on('input change', function(){ setLogoFontSize($(this).val()); });
  $('#siteLogoTextColor').on('input', function(){ setLogoTextColor($(this).val()); });
  $('#siteLogoTextColorPicker').on('input change', function(){ setLogoTextColor($(this).val()); });
  $('#logoTextColorPresets').on('click', '.btn', function(){ setLogoTextColor($(this).attr('data-color') || ''); });
  $('.logo-color-picker-wrap').on('click', function(e){
    if ($(e.target).is('input[type="color"]')) return;
    var el = $(this).find('input[type="color"]')[0];
    if (el && typeof el.showPicker === 'function') { try { el.showPicker(); return; } catch (err) {} }
    if (el) el.click();
  });
  $('#btnUploadLogo').on('click', function(){ $('#logoFileInput').click(); });
  $('#logoFileInput').on('change', function(){
    var f = this.files && this.files[0];
    if (!f) return;
    var fd = new FormData();
    fd.append('logo', f);
    $.ajax({
      url: '/api/admin/logo-upload', type: 'POST', data: fd, processData: false, contentType: false,
      headers: {'X-Requested-With':'XMLHttpRequest'},
      success: function(res){
        if (!res || !res.success) {
          showAdminToast(false, (res && res.message) || {{jsString (T "admin.common.save_fail")}});
          return;
        }
        var url = (res.data && (res.data.logo || res.data.url)) || '';
        $('#siteLogoImage').val(url);
        setLogoType('image');
      },
      error: function(xhr){
        showAdminToast(false, (xhr.responseJSON && xhr.responseJSON.message) || {{jsString (T "admin.common.save_fail")}});
      }
    });
    this.value = '';
  });
  $('#btnRemoveLogo').on('click', function(){
    $('#siteLogoImage').val('');
    updateLogoPreview();
  });
  setLogoIcon({{json .LogoIcon}});
  setLogoIconColor({{json .LogoIconColor}});
  setLogoIconShape({{json .LogoIconShape}});
  setLogoIconSize({{json .LogoIconSize}});
  setLogoFontSize({{json .LogoFontSize}});
  setLogoTextColor({{json .LogoTextColor}});
  setLogoType({{json .LogoFormType}});
  syncLogoNameField();
  updateLogoPreview();
  $('#system-settings-form').on('submit', function(e){
    e.preventDefault();
    syncLogoNameField();
    var $form = $(this);
    var $btn = $form.find('button[type="submit"]').prop('disabled', true);
    $.ajax({
      url: $form.attr('action'),
      method: 'POST',
      data: $form.serialize(),
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      dataType: 'json'
    }).done(function(res){
      if (res && res.success) {
        showAdminToast(true, (res.data && res.data.message) || res.message || {{jsString (T "admin.msg.system_saved")}});
      } else {
        showAdminToast(false, (res && res.message) || {{jsString (T "admin.common.save_fail")}});
      }
    }).fail(function(xhr){
      var msg = {{jsString (T "admin.common.save_fail")}};
      try {
        var j = JSON.parse(xhr.responseText);
        if (j && j.message) msg = j.message;
      } catch (err) {}
      showAdminToast(false, msg);
    }).always(function(){
      $btn.prop('disabled', false);
    });
  });
})(jQuery);
</script>

{{if index .Data "OAuthReady"}}
<section class="cs-admin-section mt-4" id="admin-oauth-bind">
  <div class="cs-admin-section__head">
    <div class="cs-admin-section__head-icon"><i class="bx bx-link-alt"></i></div>
    <div class="cs-admin-section__head-text">
      <h2 class="cs-admin-section__head-title">{{T "oauth.bind_title"}}</h2>
      <p class="cs-admin-section__head-sub">{{T "oauth.bind_hint"}}</p>
    </div>
  </div>
  <div class="cs-admin-section__body">
    <div id="oauthBindFlash" class="mb-2"></div>
    <div class="d-flex flex-wrap align-items-center gap-2">
      {{if index .Data "OAuthLinked"}}
      <span class="text-success" id="oauthBindStatus"><i class="bx bx-check-circle"></i> {{T "oauth.status_linked"}}{{if index .Data "OAuthProvider"}} — {{index .Data "OAuthProvider"}}{{end}}</span>
      <button type="button" class="btn btn-outline-danger btn-sm" id="btnOAuthUnlink">{{T "oauth.unlink_action"}}</button>
      {{else}}
      <span class="text-muted" id="oauthBindStatus">{{T "oauth.status_none"}}</span>
      <button type="button" class="btn btn-primary btn-sm" id="btnOAuthBind" data-href="/oauth/start?intent=link&amp;redirect={{urlquery "/admin/settings/system"}}">{{T "oauth.bind_action"}}</button>
      {{end}}
    </div>
  </div>
</section>
<script>
(function ($) {
  var oauthI18n = {
    unlinkConfirm: {{jsString (T "oauth.unlink_confirm")}},
    unlinkOk: {{jsString (T "oauth.unlink_ok")}},
    bindOk: {{jsString (T "oauth.bind_ok")}},
    binding: {{jsString (T "oauth.binding")}},
    unlinking: {{jsString (T "oauth.unlinking")}},
    failed: {{jsString (T "oauth.err_failed")}}
  };
  function oauthFlash(msg, ok) {
    var $box = $('#oauthBindFlash');
    if (!$box.length || !msg) return;
    $box.html('<div class="alert alert-' + (ok ? 'success' : 'danger') + ' py-2 mb-0"></div>');
    $box.find('.alert').text(msg);
  }
  function oauthStripQ() {
    if (!window.history || !window.history.replaceState) return;
    var u = new URL(window.location.href);
    if (!u.searchParams.has('oauth_link') && !u.searchParams.has('oauth_err')) return;
    u.searchParams.delete('oauth_link');
    u.searchParams.delete('oauth_err');
    var q = u.searchParams.toString();
    window.history.replaceState({}, '', u.pathname + (q ? ('?' + q) : '') + (u.hash || ''));
  }
  function oauthLoad() {
    if (window.myModal && typeof window.myModal.load === 'function') return window.myModal.load();
    if (window.layer && typeof window.layer.load === 'function') return window.layer.load(2);
    return null;
  }
  function oauthClose(id) {
    if (id == null) return;
    if (window.myModal && typeof window.myModal.close === 'function') { window.myModal.close(id); return; }
    if (window.layer && typeof window.layer.close === 'function') window.layer.close(id);
  }
  {{if index .Data "OAuthBindOk"}}
  $(function () {
    if (window.showAdminToast) showAdminToast(true, oauthI18n.bindOk);
    oauthFlash(oauthI18n.bindOk, true);
    oauthStripQ();
  });
  {{end}}
  {{if index .Data "OAuthErrMsg"}}
  $(function () {
    var errMsg = {{jsString (index .Data "OAuthErrMsg")}};
    if (window.showAdminToast) showAdminToast(false, errMsg);
    oauthFlash(errMsg, false);
    oauthStripQ();
  });
  {{end}}
  $('#btnOAuthBind').on('click', function () {
    var href = $(this).attr('data-href');
    if (!href) return;
    $(this).prop('disabled', true);
    oauthFlash(oauthI18n.binding, true);
    oauthLoad();
    window.setTimeout(function () { window.location.href = href; }, 120);
  });
  $('#btnOAuthUnlink').on('click', function () {
    var runUnlink = function () {
      var $btn = $('#btnOAuthUnlink').prop('disabled', true);
      oauthFlash(oauthI18n.unlinking, true);
      var lid = oauthLoad();
      $.ajax({
        url: '/api/user/oauth/unlink',
        type: 'POST',
        dataType: 'json',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      }).done(function (res) {
        oauthClose(lid);
        if (res && res.success) {
          if (window.showAdminToast) showAdminToast(true, res.message || oauthI18n.unlinkOk);
          oauthFlash(res.message || oauthI18n.unlinkOk, true);
          window.setTimeout(function () { window.location.reload(); }, 450);
        } else {
          $btn.prop('disabled', false);
          var m = (res && res.message) || oauthI18n.failed;
          if (window.showAdminToast) showAdminToast(false, m);
          oauthFlash(m, false);
        }
      }).fail(function (xhr) {
        oauthClose(lid);
        $btn.prop('disabled', false);
        var m = (xhr.responseJSON && xhr.responseJSON.message) || oauthI18n.failed;
        if (window.showAdminToast) showAdminToast(false, m);
        oauthFlash(m, false);
      });
    };
    var Modal = window.SupfileModal || window.myModal || window.POModal || window.BootstrapModal || window.layer;
    if (Modal && typeof Modal.confirm === 'function') {
      Modal.confirm(oauthI18n.unlinkConfirm, { icon: 3 }).then(function (ok) { if (ok) runUnlink(); });
    }
  });
})(jQuery);
</script>
{{end}}
</div>
{{template "admin/layout_foot" .}}
{{end}}