{{define "admin/config.html"}}
{{template "admin_shell_open" .}}
<style>
/* System config: section anchors + draggable TOC */
.admin-config-section {
  scroll-margin-top: calc(var(--admin-top-h, 52px) + 12px);
}
.admin-config-section:last-of-type {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.admin-config-toc {
  position: fixed;
  z-index: 1020;
  width: 220px;
  max-width: min(220px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  font-size: 0.8125rem;
  right: 16px;
  top: 96px;
  left: auto;
  user-select: none;
}
.admin-config-toc__bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
  border-bottom: 1px solid rgba(37, 99, 235, 0.15);
  cursor: grab;
  min-height: 2.25rem;
}
.admin-config-toc__bar:active {
  cursor: grabbing;
}
.admin-config-toc__title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: #1e40af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-config-toc__bar .btn-link {
  flex-shrink: 0;
  padding: 0 0.25rem;
  font-size: 0.75rem;
  line-height: 1.2;
  color: #2563eb;
  text-decoration: none;
}
.admin-config-toc__bar .btn-link:hover {
  color: #1d4ed8;
}
.admin-config-toc__nav {
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 0.35rem 0;
}
.admin-config-toc__nav a {
  display: block;
  padding: 0.35rem 0.75rem;
  color: #334155;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.admin-config-toc__nav a:hover {
  background: rgba(37, 99, 235, 0.06);
  color: #1e40af;
}
.admin-config-toc__nav a.active {
  background: rgba(37, 99, 235, 0.1);
  border-left-color: #2563eb;
  color: #1e3a8a;
  font-weight: 600;
}
.admin-config-toc--collapsed .admin-config-toc__nav {
  display: none;
}
.admin-config-toc--collapsed {
  width: auto;
  min-width: 0;
  max-width: min(320px, calc(100vw - 24px));
}
.admin-config-toc--collapsed .admin-config-toc__bar {
  border-bottom: 0;
}
@media (max-width: 991.98px) {
  .admin-config-toc {
    display: none !important;
  }
}
</style>
<div class="cs-admin-page cs-admin-page--narrow">
{{template "admin_flash" .}}
<header class="cs-admin-pagehead">
  <div class="d-flex align-items-start gap-3 flex-grow-1 min-w-0">
    <div class="cs-admin-pagehead__icon" aria-hidden="true"><i class="bx bx-cog"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{T "admin.config.title"}}</h1>
      <p class="cs-admin-pagehead__desc">{{T "admin.config.desc"}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links d-flex flex-wrap gap-2">
    <a href="/admin/r2" class="btn btn-sm btn-outline-primary"><i class="bx bx-cloud me-1"></i>{{T "admin.config.link_r2"}}</a>
    <a href="/admin/ai-providers" class="btn btn-sm btn-outline-secondary"><i class="bx bx-bot me-1"></i>{{T "admin.config.link_ai"}}</a>
  </div>
</header>

<form method="post" action="/admin/config" class="card cs-admin-section cs-admin-ajax-form admin-config-save-form" data-cs-reload="1">
  <div class="cs-admin-section__body p-0">
  {{range .Data.Sections}}
    <section id="{{.ID}}" class="admin-config-section border-bottom px-3 px-md-4 pt-4 pb-4 mb-0">
      <h2 class="h6 mb-3 text-primary">{{.Title}}</h2>
      <div class="row g-3">
      {{range .Items}}
        {{$k := .Key}}
        <div class="col-md-6">
          <label class="form-label small mb-1 fw-semibold text-body">{{.Label}}</label>
          <div class="small text-muted font-monospace mb-1">{{.Key}}</div>
          {{if eq .Kind "boolean"}}
          <select class="form-select form-select-sm" name="cfg_{{.Key}}">
            <option value="1" {{if eq (index $.Data.Cfgs $k) "1"}}selected{{end}}>{{T "admin.config.on"}}</option>
            <option value="0" {{if eq (index $.Data.Cfgs $k) "0"}}selected{{end}}>{{T "admin.config.off"}}</option>
          </select>
          {{else if eq .Kind "select_user_groups"}}
          <select class="form-select form-select-sm" name="cfg_{{.Key}}">
            {{range $.Data.Groups}}
            {{$gid := index . "id"}}{{$st := asInt (index . "status")}}
            <option value="{{$gid}}" {{if eq (printf "%v" $gid) (index $.Data.Cfgs $k)}}selected{{end}}>{{index . "name"}}（{{index . "slug"}}，ID {{$gid}}）{{if ne $st 1}}{{T "admin.config.group_disabled"}}{{end}}</option>
            {{else}}
            <option value="">{{T "admin.config.no_groups"}}</option>
            {{end}}
          </select>
          {{else if eq .Kind "number"}}
          <input class="form-control form-control-sm" name="cfg_{{.Key}}" value="{{index $.Data.Cfgs $k}}" {{if or (eq $k "preview_max_unzip_bytes") (eq $k "upload_max_file_bytes")}}step="any" inputmode="decimal" placeholder="{{T "admin.config.ph_mib"}}"{{end}}>
          {{else}}
          <input class="form-control form-control-sm" name="cfg_{{.Key}}" value="{{index $.Data.Cfgs $k}}" autocomplete="off" placeholder="{{if eq .Kind "masked"}}{{T "admin.config.ph_masked"}}{{end}}">
          {{if eq .Kind "masked"}}<div class="form-text">{{T "admin.config.masked_hint"}}</div>{{end}}
          {{end}}
          {{if ne .Hint ""}}<div class="form-text">{{.Hint}}</div>{{end}}
          {{if or (eq $k "mime_allow_screenshot") (eq $k "mime_allow_video") (eq $k "mime_allow_archive") (eq $k "ext_allow_screenshot") (eq $k "ext_allow_video") (eq $k "ext_allow_archive")}}
          <div class="form-text">{{T "admin.config.comma_hint"}}</div>
          {{end}}
        </div>
      {{end}}
      </div>
    </section>
  {{end}}
  <section id="admin-config-logo" class="admin-config-section border-bottom px-3 px-md-4 pt-4 pb-4 mb-0">
    <h2 class="h6 mb-3 text-primary">{{T "handlers.admin_config.section.admin-config-logo"}}</h2>
    <p class="small text-muted mb-3">{{T "admin.logo.desc"}}</p>
    <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 form-control-sm" 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 form-control-sm" id="siteLogoIcon" name="logo_icon" value="{{.LogoIcon}}" placeholder="bx-code-alt">
          </div>
          <div class="logo-icon-presets" id="logoIconPresets">
            <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-code" title="bx-code"><i class="bx bx-code"></i></button>
            <button type="button" class="btn" data-icon="bx-git-branch" title="bx-git-branch"><i class="bx bx-git-branch"></i></button>
            <button type="button" class="btn" data-icon="bx-terminal" title="bx-terminal"><i class="bx bx-terminal"></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-folder" title="bx-folder"><i class="bx bx-folder"></i></button>
            <button type="button" class="btn" data-icon="bx-share-alt" title="bx-share-alt"><i class="bx bx-share-alt"></i></button>
            <button type="button" class="btn" data-icon="bx-cloud-upload" title="bx-cloud-upload"><i class="bx bx-cloud-upload"></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}}#002fa7{{end}}">
                <input type="color" class="logo-color-picker" id="siteLogoIconColorPicker" value="{{if .LogoIconColor}}{{.LogoIconColor}}{{else}}#002fa7{{end}}" title="{{T "admin.logo.icon_color"}}" aria-label="{{T "admin.logo.icon_color"}}">
              </span>
              <input type="text" class="form-control form-control-sm" id="siteLogoIconColor" name="logo_icon_color" value="{{.LogoIconColor}}" placeholder="#002fa7" maxlength="7" spellcheck="false">
            </div>
            <div class="logo-color-presets" id="logoColorPresets">
              <button type="button" class="btn" data-color="#002fa7" title="#002fa7" style="background:#002fa7"></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="#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="#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 form-control-sm" 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 form-control-sm" 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 form-control-sm" 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="#002fa7" title="#002fa7" style="background:#002fa7"></button>
            <button type="button" class="btn" data-color="#2563eb" title="#2563eb" style="background:#2563eb"></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>
        </div>
        <label class="form-label mt-2" for="siteLogoImage">{{T "admin.logo.image_url"}}</label>
        <div class="logo-image-url-row">
          <input type="text" class="form-control form-control-sm" id="siteLogoImage" value="{{.LogoFormImage}}" maxlength="512">
        </div>
        <input type="hidden" id="logoImageValue" name="logo" value="{{if eq .LogoFormType "image"}}{{.LogoFormImage}}{{end}}" disabled>
        <input type="file" id="logoFileInput" accept=".png,.jpg,.jpeg,.gif,.webp,image/png,image/jpeg,image/gif,image/webp" style="display:none">
        <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>
  </section>
  {{if .IsPro}}
  <section id="admin-config-footer-brand" class="admin-config-section border-bottom px-3 px-md-4 pt-4 pb-4 mb-0">
    <h2 class="h6 mb-3 text-primary">{{T "admin.config.footer_brand"}}</h2>
    <p class="small text-muted mb-3">{{T "admin.config.footer_brand_desc"}}</p>
    <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.config.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.config.footer_show_dev"}}">
        </div>
      </div>
    </div>
  </section>
  {{end}}
  </div>
  <div class="cs-admin-savebar mx-0 mb-0 rounded-0 border-start-0 border-end-0 border-bottom-0">
    <p class="cs-admin-savebar__hint mb-0"><i class="bx bx-info-circle" aria-hidden="true"></i> {{T "admin.config.save_hint"}}</p>
    <button class="btn btn-primary btn-sm" type="submit"><i class="bx bx-save me-1"></i>{{T "admin.config.save_btn"}}</button>
  </div>
</form>

{{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/config"}}">{{T "oauth.bind_action"}}</button>
      {{end}}
    </div>
  </div>
</section>
{{end}}

<div id="adminConfigToc" class="admin-config-toc d-none d-lg-block" aria-label="{{T "admin.config.toc_aria"}}">
  <div class="admin-config-toc__bar js-admin-config-toc-drag" title="{{T "admin.config.toc_drag"}}">
    <i class="bx bx-menu-alt-left flex-shrink-0 text-primary" aria-hidden="true"></i>
    <span class="admin-config-toc__title">{{T "admin.config.toc_title"}}</span>
    <button type="button" class="btn btn-link btn-sm js-admin-config-toc-toggle p-0">{{T "admin.config.toc_collapse"}}</button>
  </div>
  <nav class="admin-config-toc__nav small">
    {{range .Data.Sections}}
    <a href="#{{.ID}}" class="js-admin-config-toc-link">{{.Title}}</a>
    {{end}}
    <a href="#admin-config-logo" class="js-admin-config-toc-link">{{T "handlers.admin_config.section.admin-config-logo"}}</a>
    {{if .IsPro}}
    <a href="#admin-config-footer-brand" class="js-admin-config-toc-link">{{T "handlers.admin_config.section.admin-config-footer-brand"}}</a>
    {{end}}
    {{if index .Data "OAuthReady"}}
    <a href="#admin-oauth-bind" class="js-admin-config-toc-link">{{T "oauth.bind_title"}}</a>
    {{end}}
  </nav>
</div>

<script>
(function () {
  var Ltoc = { expand: {{jsString (T "admin.config.toc_expand")}}, collapse: {{jsString (T "admin.config.toc_collapse")}} };
  var LS_KEY = 'codeshare_admin_config_toc_v1';
  var $toc = $('#adminConfigToc');
  if (!$toc.length) return;

  function readState() {
    try {
      var raw = window.localStorage.getItem(LS_KEY);
      if (!raw) return null;
      return JSON.parse(raw);
    } catch (e) {
      return null;
    }
  }
  function writeState(obj) {
    try {
      window.localStorage.setItem(LS_KEY, JSON.stringify(obj));
    } catch (e) {}
  }

  function parsePx(v) {
    if (v == null || v === '' || v === 'auto') return NaN;
    var n = parseFloat(String(v).replace('px', ''));
    return isNaN(n) ? NaN : n;
  }

  function syncDomFromRightToLeft() {
    var r = $toc[0].getBoundingClientRect();
    $toc.css({ left: r.left + 'px', top: r.top + 'px', right: 'auto' });
  }

  function clampPosition() {
    var w = $toc.outerWidth();
    var h = $toc.outerHeight();
    var maxL = Math.max(8, window.innerWidth - w - 8);
    var maxT = Math.max(8, window.innerHeight - h - 8);
    var l = parsePx($toc.css('left'));
    var t = parsePx($toc.css('top'));
    if (isNaN(l) || isNaN(t)) return;
    $toc.css({
      left: Math.min(maxL, Math.max(8, l)) + 'px',
      top: Math.min(maxT, Math.max(8, t)) + 'px'
    });
  }

  function applyStored() {
    var st = readState();
    if (!st) return;
    if (typeof st.collapsed === 'boolean') {
      $toc.toggleClass('admin-config-toc--collapsed', st.collapsed);
      $toc.find('.js-admin-config-toc-toggle').text(st.collapsed ? Ltoc.expand : Ltoc.collapse);
    }
    if (typeof st.left === 'number' && typeof st.top === 'number') {
      $toc.css({ left: st.left + 'px', top: st.top + 'px', right: 'auto' });
      clampPosition();
    }
  }

  $(function () {
    applyStored();

    $toc.find('.js-admin-config-toc-toggle').on('click', function (e) {
      e.preventDefault();
      e.stopPropagation();
      var collapsed = !$toc.hasClass('admin-config-toc--collapsed');
      $toc.toggleClass('admin-config-toc--collapsed', collapsed);
      $(this).text(collapsed ? Ltoc.expand : Ltoc.collapse);
      var st = readState() || {};
      st.collapsed = collapsed;
      writeState(st);
      clampPosition();
    });

    var dragging = false;
    var dx = 0;
    var dy = 0;
    var $drag = $toc.find('.js-admin-config-toc-drag');

    $drag.on('mousedown', function (e) {
      if ($(e.target).closest('button,.js-admin-config-toc-toggle,a').length) return;
      dragging = true;
      if ($toc.css('right') !== 'auto') {
        syncDomFromRightToLeft();
      }
      var l = parsePx($toc.css('left'));
      var t = parsePx($toc.css('top'));
      dx = e.clientX - l;
      dy = e.clientY - t;
      e.preventDefault();
    });

    $(document).on('mousemove', function (e) {
      if (!dragging) return;
      $toc.css({
        left: (e.clientX - dx) + 'px',
        top: (e.clientY - dy) + 'px',
        right: 'auto'
      });
      clampPosition();
    }).on('mouseup', function () {
      if (!dragging) return;
      dragging = false;
      var st = readState() || {};
      st.left = Math.round(parsePx($toc.css('left')));
      st.top = Math.round(parsePx($toc.css('top')));
      writeState(st);
    });

    $(window).on('resize', function () {
      clampPosition();
    });

    // Smooth scroll to anchors (scroll-margin handles top bar)
    $toc.on('click', 'a[href^="#"]', function (e) {
      var id = $(this).attr('href');
      if (!id || id.length < 2) return;
      var $sec = $(id);
      if (!$sec.length) return;
      e.preventDefault();
      var top = $sec.offset().top - 16;
      $('html, body').animate({ scrollTop: Math.max(0, top) }, 280);
      if (history.replaceState) {
        history.replaceState(null, '', id);
      }
    });

    // Highlight TOC link for the section near the viewport top
    var ids = $toc.find('.js-admin-config-toc-link').map(function () {
      var href = $(this).attr('href') || '';
      return href.charAt(0) === '#' ? href.slice(1) : '';
    }).get().filter(Boolean);

    function pickActiveSection() {
      if (!ids.length) return;
      var st = $(window).scrollTop();
      var pad = 88;
      var pick = ids[0];
      for (var i = 0; i < ids.length; i++) {
        var $el = $('#' + ids[i]);
        if (!$el.length) continue;
        if ($el.offset().top - pad <= st + 8) pick = ids[i];
      }
      $toc.find('.js-admin-config-toc-link').removeClass('active');
      var $a = $toc.find('.js-admin-config-toc-link[href="#' + pick + '"]');
      if ($a.length) $a.addClass('active');
    }
    var scrollTimer;
    $(window).on('scroll', function () {
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(pickActiveSection, 40);
    });
    pickActiveSection();
  });
})();
</script>
<script>
(function($){
  function logoToast(ok, msg) {
    if (window.showAdminToast) { showAdminToast(!!ok, msg); return; }
    if (msg) alert(msg);
  }
  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 || '#002fa7';
  }
  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, '#002fa7');
    $('#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) { logoToast(false, (res && res.message) || 'upload failed'); return; }
        var url = (res.data && (res.data.logo || res.data.url)) || '';
        $('#siteLogoImage').val(url);
        setLogoType('image');
      },
      error: function(xhr){ logoToast(false, (xhr.responseJSON && xhr.responseJSON.message) || 'upload failed'); }
    });
    this.value = '';
  });
  $('#btnRemoveLogo').on('click', function(){ $('#siteLogoImage').val(''); updateLogoPreview(); });
  $('#siteLogoImage').on('input', function(){ syncLogoNameField(); updateLogoPreview(); });
  setLogoIcon({{json .LogoIcon}});
  setLogoIconColor({{json .LogoIconColor}});
  setLogoIconShape({{json .LogoIconShape}});
  setLogoIconSize({{json .LogoIconSize}});
  setLogoFontSize({{json .LogoFontSize}});
  setLogoTextColor({{json .LogoTextColor}});
  setLogoType({{json .LogoFormType}});
  syncLogoNameField();
  updateLogoPreview();
})(jQuery);
</script>
<script src="{{asset "/template/default/assets/js/app-toast.js"}}"></script>
<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>
</div>
{{template "admin_shell_close" .}}
{{end}}