{extend name="common/layout" /}
{block name="title"}模板主题{/block}
{block name="css"}
<style>
.app-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;padding:16px 18px;border-radius:var(--bs-border-radius,0.45rem);background:linear-gradient(120deg,rgba(var(--bs-primary-rgb), .12),rgba(var(--bs-primary-rgb), .04)),var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#e6eef0)}
.app-hero h3{margin:0 0 4px;font-size:20px;font-weight:700;color:var(--bs-body-color,#1f2a37)}
.app-hero p{margin:0;color:var(--bs-secondary-color,#6b7785);font-size:13px}
.app-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.app-actions .account{font-size:12px;color:var(--bs-primary);margin-right:4px}
.apps-local-badge{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;border-radius:var(--bs-border-radius-sm,0.25rem);background:#1f9d8a;color:#fff !important;margin-right:4px;line-height:1}
.app-actions .btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;margin:0;font-size:12px;line-height:1;box-sizing:border-box;vertical-align:middle}
.app-actions label.btn{cursor:pointer;font-weight:400}
.app-actions .btn-light{background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#d9e1ec);color:var(--bs-body-color,#172935)}
.app-actions .btn-light:hover{background:var(--bs-gray-100,#f4f6f9);border-color:var(--bs-primary);color:var(--bs-primary)}
@media (max-width:992px){
  .app-hero{flex-direction:column;align-items:stretch;gap:12px}
  .app-hero > div:first-child{width:100%}
  .app-actions{width:100%;justify-content:flex-start}
}
.theme-toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:nowrap;align-items:center}
.theme-toolbar .form-control{max-width:240px;width:240px;flex:0 0 auto}
.theme-toolbar .form-select,
.theme-toolbar .selectr-container,
.theme-toolbar .selectr-container.admin-selectr{
  max-width:160px;width:160px;flex:0 0 160px;
}
.theme-toolbar-right{display:flex;gap:8px;margin-left:auto;flex:0 0 auto;align-items:center}
.theme-toolbar-right .btn{white-space:nowrap}
.theme-toolbar-right .btn.is-on{background:var(--bs-primary);border-color:var(--bs-primary);color:#fff}
.theme-empty-filter{display:none;margin:8px 0 0;color:var(--bs-secondary-color,#6b7785);font-size:13px}
@media (max-width:992px){
  .theme-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  .theme-toolbar .form-control,
  .theme-toolbar .form-select,
  .theme-toolbar .selectr-container,
  .theme-toolbar .selectr-container.admin-selectr{width:100%;max-width:none;flex:none}
  .theme-toolbar-right{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-left:0;width:100%}
  .theme-toolbar-right .btn{width:100%;justify-content:center}
}
.app-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1200px){.app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:768px){.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.app-grid{grid-template-columns:1fr}}
.theme-card{height:100%;border:1px solid var(--bs-border-color,#e5ecee);border-radius:var(--bs-border-radius,0.45rem);background:var(--bs-body-bg,#fff);padding:14px;transition:.2s ease;color:var(--bs-body-color)}
.theme-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(31,50,55,.1);border-color:rgba(var(--bs-primary-rgb), .35)}
.theme-card.is-active{border-color:var(--bs-primary);box-shadow:0 0 0 1px rgba(var(--bs-primary-rgb), .25)}
.theme-top{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.theme-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:transparent;flex-shrink:0;overflow:hidden}
.theme-icon img{width:100%;height:100%;object-fit:contain}
.theme-icon-fallback{background:linear-gradient(145deg,rgba(var(--bs-primary-rgb), .14),rgba(var(--bs-primary-rgb), .06));color:var(--bs-primary);font-size:22px}
.theme-top h4{margin:0 0 2px;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;color:var(--bs-body-color,#1f2a37)}
.theme-slug{font-size:11px;color:var(--bs-secondary-color,#95a0ab);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.theme-top .tag{display:inline-block;padding:1px 8px;border-radius:999px;background:rgba(var(--bs-primary-rgb), .12);color:var(--bs-primary);font-size:11px;flex-shrink:0;margin-top:2px}
.theme-desc{margin:0 0 10px;color:var(--bs-secondary-color,#6b7785);font-size:12px;line-height:1.55;min-height:calc(1.55em * 2);max-height:calc(1.55em * 2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word}
.theme-meta{display:flex;justify-content:space-between;color:var(--bs-secondary-color,#95a0ab);font-size:11px;margin-bottom:8px}
.theme-flag{font-size:11px;color:var(--bs-secondary-color,#95a0ab);margin-bottom:8px}
.theme-flag.on{color:#22b783}
.theme-actions{display:flex;gap:6px;flex-wrap:wrap}
.theme-actions .btn{flex:1;min-width:0}
.btn-down{background:#22b783;border-color:#22b783;color:#fff}
.btn-down:hover{background:#1a8f66;border-color:#1a8f66;color:#fff}
.btn-buy{background:#e67e22;border-color:#e67e22;color:#fff}
.btn-buy:hover{background:#d35400;border-color:#d35400;color:#fff}
.price-line{font-size:12px;color:#e67e22;margin-bottom:8px;font-weight:600}
.theme-empty{padding:40px;text-align:center;color:var(--bs-secondary-color,#95a0ab);background:var(--bs-body-bg,#fff);border:1px dashed var(--bs-border-color,#d9e3e6);border-radius:var(--bs-border-radius,0.45rem)}
.warn-banner{margin-bottom:14px;padding:10px 14px;border-radius:var(--bs-border-radius,0.45rem);background:rgba(250,166,75,.12);border:1px solid rgba(250,166,75,.35);color:#ad6800;font-size:13px}
[data-bs-theme="dark"] .app-hero{
  background:linear-gradient(120deg,rgba(var(--bs-primary-rgb), .18),rgba(var(--bs-primary-rgb), .06)),var(--bs-body-bg);
  border-color:var(--bs-border-color);
}
[data-bs-theme="dark"] .theme-card,
[data-bs-theme="dark"] .theme-empty{
  background:var(--bs-tertiary-bg,#1e2435);
  border-color:var(--bs-border-color);
}
[data-bs-theme="dark"] .theme-card:hover{
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  border-color:rgba(var(--bs-primary-rgb), .45);
}

[data-bs-theme="dark"] .warn-banner{color:#ffc078;background:rgba(250,166,75,.14);border-color:rgba(250,166,75,.3)}
[data-bs-theme="dark"] .app-actions .account{color:var(--bs-primary,#9b97ff)}
</style>
{/block}
{block name="content"}
<div class="app-hero">
  <div>
    <h3>{$pageTitle}</h3>
    {if $localMode}
    <p>本地模式：仅管理服务器上已有的本地主题，不登录、不连接应用市场。 <span style="color:#1f9d8a;">· 共 {$localCount} 个本地主题</span></p>
    {else /}
    <p>{$pageDesc}{if $dbCount > 0} <span style="color:#1f9d8a;">· 已从市场读取 {$dbCount} 个主题</span>{/if}{if $remoteEnabled && $remoteCount > 0} <span style="color:#1f9d8a;">· 远程 {$remoteCount} 个</span>{/if}</p>
    {/if}
  </div>
  <div class="app-actions">
    {if $localMode}
      <span class="account apps-local-badge"><i class="ri-computer-line"></i> 本地模式</span>
      <a class="btn btn-primary btn-sm" href="{$switchMarketUrl|default=''}">
        <i class="ri-store-2-line"></i> 切换市场
      </a>
    {else /}
      {if $official.logged_in}
        <span class="account"><i class="ri-user-follow-line"></i> {$official.nickname}</span>
        <span class="account" style="color:#f5a623;"><i class="ri-copper-coin-line"></i> <span id="user-coins">{$userBalance.gold}</span> {$gold_name|default='金币'}</span>
        <button type="button" class="btn btn-light btn-sm" id="btn-official-logout">退出登录</button>
      {else /}
        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#officialModal">
          <i class="ri-login-box-line"></i> 登录账号
        </button>
      {/if}
      <a class="btn btn-light btn-sm" href="{$switchLocalUrl|default=''}" title="不登录、不连接市场，仅管理本地主题">
        <i class="ri-computer-line"></i> 本地模式
      </a>
    {/if}
    <label class="btn btn-primary btn-sm">
      <i class="ri-upload-2-line"></i> 上传主题
      <input type="file" id="upload-file" accept=".zip" style="display:none">
    </label>
  </div>
</div>

{if !$communityOk}
<div class="warn-banner">尚未安装或启用「社区」插件，主题无法启用。请先到应用插件中安装 community。</div>
{/if}

{if $remoteEnabled && !empty($remoteError)}
<div class="alert alert-warning" style="margin-bottom:14px;">
  远程应用市场读取失败：不支持本地或局域网连接市场，请部署到线上环境后重试~
</div>
{/if}

{if $themes}
<div class="theme-toolbar">
  <input type="search" class="form-control" id="theme-kw" name="theme_filter_kw" placeholder="搜索主题名称 / 标签"
    autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" data-lpignore="true" data-1p-ignore="true">
  <select class="form-select" id="theme-tag" name="theme_filter_tag" autocomplete="off">
    <option value="">全部标签</option>
    {volist name="themeTags" id="tag"}
    <option value="{$tag.name}">{$tag.name}</option>
    {/volist}
  </select>
  <div class="theme-toolbar-right">
    {if !$localMode}
    <button type="button" class="btn btn-light btn-sm" id="btn-check-theme-updates" title="仅显示已安装且市场有更新的主题">
      <i class="ri-refresh-line"></i> 检测更新
    </button>
    <button type="button" class="btn btn-info btn-sm" id="btn-sync-theme-updates" title="一键更新全部可升级主题">
      <i class="ri-cloud-upload-line"></i> 一键同步
    </button>
    {/if}
  </div>
</div>
<p class="theme-empty-filter" id="theme-empty-filter">当前没有可更新的已安装主题</p>
<div class="app-grid" id="theme-list">
  {volist name="themes" id="item"}
  <div class="theme-card theme-item{if $item.enabled} is-active{/if}" data-id="{$item.id}"
    data-name="{$item.name}"
    data-tag="{$item.tag}"
    data-category="{$item.category_name|default=''}"
    data-installed="{if !empty($item.installed)}1{else /}0{/if}"
    data-has-update="{if !empty($item.has_update)}1{else /}0{/if}"
    data-update-id="{if !empty($item.has_update)}{if !empty($item.remote_update_id)}{$item.remote_update_id}{elseif !empty($item.is_remote) || !empty($item.is_db)}{$item.id}{/if}{/if}"
    data-version="{$item.version|default=''}">
    <div class="theme-top">
      <div class="theme-icon">
        {if !empty($item.preview)}
        <img src="{$item.preview}" alt="{$item.name}" loading="lazy" decoding="async" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
        <div class="theme-icon-fallback" style="display:none"><i class="{$item.icon|default='ri-palette-line'}"></i></div>
        {else /}
        <div class="theme-icon-fallback"><i class="{$item.icon|default='ri-palette-line'}"></i></div>
        {/if}
      </div>
      <div>
        <h4 title="{$item.name}">{$item.name}</h4>
        <div class="theme-slug">{$item.slug|default=$item.id}</div>
      </div>
      {if !empty($item.tag)}<span class="tag">{$item.tag}</span>{/if}
      {if !empty($item.is_db)}<span class="tag" style="background:#e8f6f3;color:#1f9d8a;">市场</span>{/if}
    </div>
    <p class="theme-desc">{$item.desc|default='社区前台主题模板'}</p>
    <div class="theme-meta">
      <span>v{$item.version}</span>
      <span>{if !empty($item.author)}{$item.author}{else /}宿主 {$item.host|default='community'}{/if}</span>
    </div>
    {if !empty($item.is_remote) || !empty($item.is_db)}
    <div class="price-line">{if $item.free}免费{else /}￥{$item.price}{/if}</div>
    {elseif !empty($item.free) || (float)($item.price ?? 0) <= 0}
    <div class="price-line">免费</div>
    {elseif !empty($item.price)}
    <div class="price-line">￥{$item.price}</div>
    {/if}
    <div class="theme-flag{if $item.enabled} on{/if}">
        {if $item.enabled}使用中
        {elseif $item.installed}已安装 · 未启用
        {elseif (!empty($item.is_remote) || !empty($item.is_db)) && empty($item.free) && empty($item.purchased) && empty($item.remote_owned)}待购买
        {else /}未安装
        {/if}
      </div>
      <div class="theme-actions">
        {if $item.installed}
          {if $item.enabled}
          <button type="button" class="btn btn-sm btn-light js-theme-disable" data-id="{$item.id}">停用</button>
          {else /}
          <button type="button" class="btn btn-sm btn-primary js-theme-enable" data-id="{$item.id}" {if !$item.host_ready}disabled title="请先安装社区插件"{/if}>启用</button>
          {/if}
          <button type="button" class="btn btn-sm btn-warning js-theme-uninstall" data-id="{$item.id}">卸载</button>
          {if !empty($item.has_update) && !empty($item.remote_update_id)}
          <button type="button" class="btn btn-sm btn-info js-theme-update" data-id="{$item.remote_update_id}">更新</button>
          {/if}
        {elseif !empty($item.is_remote) || !empty($item.is_db)}
          {if !empty($item.free) || !empty($item.purchased) || !empty($item.remote_owned)}
          <button type="button" class="btn btn-sm btn-down js-theme-download" data-id="{$item.id}">下载安装</button>
          {else /}
          <button type="button" class="btn btn-sm btn-buy js-theme-buy" data-id="{$item.id}" data-name="{$item.name}" data-price="{$item.price}">购买</button>
          {/if}
          {if !empty($item.is_remote) && !empty($item.detail_url)}
          <a class="btn btn-sm btn-light" href="{$item.detail_url}" target="_blank" rel="noopener">详情</a>
          {/if}
        {else /}
          <button type="button" class="btn btn-sm btn-down js-theme-install" data-id="{$item.id}">安装</button>
        {/if}
      </div>
    </div>
  {/volist}
</div>
{else /}
<div class="theme-empty">暂无主题包。可上传 zip 主题包，或放到 <code>themes/主题名/</code>，或登录应用市场获取。</div>
{/if}

<div class="modal fade" id="officialModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">登录应用中心</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted" style="font-size:12px;">登录后可购买、下载和安装主题模板。</p>
        <form id="official-login-form" autocomplete="on" onsubmit="return false;">
          <div class="mb-3">
            <label class="form-label">账号</label>
            <input type="text" class="form-control" id="official-username" name="username" placeholder="请输入账号" autocomplete="username">
          </div>
          <div class="mb-3">
            <label class="form-label">密码</label>
            <input type="password" class="form-control" id="official-password" name="password" placeholder="请输入密码" autocomplete="current-password">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="official-submit">登录</button>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script>
(function () {
  var URLS = {
    login: "{:url('/admin/apps/officialLogin')}",
    logout: "{:url('/admin/apps/officialLogout')}",
    upload: "{:url('/admin/apps/upload')}",
    install: "{:url('/admin/apps/install')}",
    uninstall: "{:url('/admin/apps/uninstall')}",
    download: "{:url('/admin/apps/download')}",
    buy: "{:url('/admin/apps/buy')}",
    update: "{:url('/admin/apps/update')}",
    enable: "{:url('/admin/apps/enableTheme')}",
    disable: "{:url('/admin/apps/disableTheme')}"
  };
  var TYPE = 'theme';

  function showModal(sel) {
    var el = document.querySelector(sel);
    if (el && window.bootstrap && bootstrap.Modal) {
      bootstrap.Modal.getOrCreateInstance(el).show();
    }
  }

  var isUserLoggedIn = {$official.logged_in ? 1 : 0};

  function reload() { location.reload(); }
  function handleNeedLogin(res) {
    if (res && res.code === 2 && res.data && res.data.need_login) {
      showModal('#officialModal');
      return true;
    }
    return false;
  }

  $('#official-submit').on('click', function () {
    $.post(URLS.login, {
      username: $('#official-username').val(),
      password: $('#official-password').val()
    }, function (res) {
      AdminUI.result(res);
      if (res.code === 1) reload();
    }, 'json');
  });
  $('#official-username, #official-password').on('keypress', function (e) {
    if (e.which === 13) $('#official-submit').click();
  });
  $('#btn-official-logout').on('click', function () {
    $.post(URLS.logout, {}, function (res) {
      AdminUI.result(res);
      if (res.code === 1) reload();
    }, 'json');
  });

  $('#upload-file').on('change', function () {
    if (!this.files.length) return;
    var fd = new FormData();
    fd.append('file', this.files[0]);
    fd.append('type', TYPE);
    $.ajax({
      url: URLS.upload, type: 'POST', data: fd, processData: false, contentType: false,
      success: function (res) {
        AdminUI.result(res);
        if (res.code === 1) reload();
      }
    });
    this.value = '';
  });

  $(document).on('click', '.js-theme-install', function () {
    var id = $(this).data('id');
    AdminUI.confirm('确认安装该主题？安装后需手动启用。', function () {
      $.post(URLS.install, { id: id }, function (res) {
        AdminUI.result(res);
        if (res.code === 1) reload();
      });
    });
  });

  $(document).on('click', '.js-theme-download', function () {
    if (!isUserLoggedIn) {
      showModal('#officialModal');
      return;
    }
    var id = $(this).data('id');
    AdminUI.confirm('确认下载并安装该主题？', function () {
      $.post(URLS.download, { id: id }, function (res) {
        if (handleNeedLogin(res)) return;
        AdminUI.result(res);
        if (res.code === 1) reload();
      }, 'json');
    });
  });

  $(document).on('click', '.js-theme-buy', function () {
    if (!isUserLoggedIn) {
      showModal('#officialModal');
      return;
    }
    var id = $(this).data('id');
    var name = $(this).data('name') || id;
    AdminUI.confirm('确认购买主题「' + name + '」？将跳转购买流程。', function () {
      $.post(URLS.buy, { id: id }, function (res) {
        if (handleNeedLogin(res)) return;
        AdminUI.result(res);
        if (res.code === 1) reload();
      }, 'json');
    });
  });

  $(document).on('click', '.js-theme-update', function () {
    var id = $(this).data('id');
    AdminUI.confirm('确认更新到市场最新版本？', function () {
      $.post(URLS.update, { id: id }, function (res) {
        if (handleNeedLogin(res)) return;
        AdminUI.result(res);
        if (res.code === 1) reload();
      }, 'json');
    });
  });

  function filterThemes() {
    var kw = $.trim($('#theme-kw').val()).toLowerCase();
    var tag = String($('#theme-tag').val() || '');
    var onlyUpdate = !!window.__themeOnlyUpdates;
    var $empty = $('#theme-empty-filter');
    // 无任何筛选条件时保持服务端渲染结果，不触碰 DOM，避免控件初始化时列表闪烁
    if (!kw && !tag && !onlyUpdate) {
      $('.theme-item').each(function () {
        if (this.style.display === 'none') this.style.display = '';
      });
      $empty.hide();
      return;
    }
    var visible = 0;
    $('.theme-item').each(function () {
      var $el = $(this);
      var name = String($el.data('name') || '').toLowerCase();
      var t = String($el.data('tag') || '');
      var cat = String($el.data('category') || '');
      var okKw = !kw || name.indexOf(kw) > -1 || t.toLowerCase().indexOf(kw) > -1;
      var okTag = !tag || t === tag || cat === tag;
      var okUp = !onlyUpdate || (String($el.data('has-update')) === '1' && String($el.data('installed')) === '1');
      var show = okKw && okTag && okUp;
      $el.toggle(show);
      if (show) visible++;
    });
    $empty
      .text(onlyUpdate && !kw && !tag ? '当前没有可更新的已安装主题' : '没有符合筛选条件的主题')
      .toggle(visible === 0);
  }
  function clearThemeSearchAutofill() {
    var $kw = $('#theme-kw');
    if (!$kw.length || $kw.data('user-typed')) return;
    // 仅在确实被浏览器误填时才清空；无值时 filterThemes 已为空操作
    if ($.trim($kw.val()) !== '') $kw.val('');
    filterThemes();
  }
  $('#theme-kw').on('input change', function () {
    if (document.activeElement === this) {
      $(this).data('user-typed', 1);
    }
    filterThemes();
  });
  $('#theme-tag').on('change', filterThemes);
  clearThemeSearchAutofill();
  setTimeout(clearThemeSearchAutofill, 50);
  setTimeout(clearThemeSearchAutofill, 300);
  setTimeout(clearThemeSearchAutofill, 800);
  function collectUpdatableThemes() {
    var list = [];
    var seen = {};
    $('.theme-item').each(function () {
      var $el = $(this);
      if (String($el.data('has-update')) !== '1' || String($el.data('installed')) !== '1') return;
      var uid = String($el.data('update-id') || '').trim();
      if (!uid || seen[uid]) return;
      seen[uid] = 1;
      list.push({
        id: uid,
        name: String($el.data('name') || uid),
        version: String($el.data('version') || '')
      });
    });
    return list;
  }
  function refreshThemeUpdateButtons() {
    var n = collectUpdatableThemes().length;
    var $check = $('#btn-check-theme-updates');
    var $sync = $('#btn-sync-theme-updates');
    if (!$check.length) return;
    if (window.__themeOnlyUpdates) {
      $check.addClass('is-on').html('<i class="ri-refresh-line"></i> 显示全部');
    } else {
      $check.removeClass('is-on').html('<i class="ri-refresh-line"></i> 检测更新' + (n ? ' (' + n + ')' : ''));
    }
    $sync.prop('disabled', n === 0).html('<i class="ri-cloud-upload-line"></i> 一键同步');
    $sync.attr('title', n ? ('一键更新 ' + n + ' 个可升级主题') : '当前没有可同步的更新');
  }
  $('#btn-check-theme-updates').on('click', function () {
    window.__themeOnlyUpdates = !window.__themeOnlyUpdates;
    filterThemes();
    refreshThemeUpdateButtons();
    if (window.__themeOnlyUpdates) {
      var n = $('.theme-item:visible').length;
      if (n > 0 && window.AdminUI && AdminUI.notify) {
        AdminUI.notify('找到 ' + n + ' 个可更新主题', 'success');
      }
    }
  });
  $('#btn-sync-theme-updates').on('click', function () {
    var list = collectUpdatableThemes();
    if (!list.length) {
      AdminUI.notify('没有可同步的更新', 'warning');
      return;
    }
    AdminUI.confirm('确认一键同步更新 ' + list.length + ' 个已安装主题？将按顺序逐个升级。', function () {
      var $btn = $('#btn-sync-theme-updates').prop('disabled', true);
      var i = 0;
      var ok = 0;
      var fail = 0;
      function next() {
        if (i >= list.length) {
          AdminUI.notify('同步完成：成功 ' + ok + '，失败 ' + fail, fail ? 'warning' : 'success');
          if (ok > 0) {
            setTimeout(function () { location.reload(); }, 600);
          } else {
            refreshThemeUpdateButtons();
          }
          return;
        }
        var item = list[i++];
        $btn.html('<i class="ri-refresh-line"></i> 同步中 ' + i + '/' + list.length);
        $.post(URLS.update, { id: item.id }, function (res) {
          if (res && res.code === 1) ok++;
          else fail++;
          next();
        }, 'json').fail(function () {
          fail++;
          next();
        });
      }
      next();
    });
  });
  refreshThemeUpdateButtons();

  $(document).on('click', '.js-theme-enable', function () {
    var id = $(this).data('id');
    AdminUI.confirm('启用后将替换社区前台主题（同宿主仅可启用一套）。', function () {
      $.post(URLS.enable, { id: id }, function (res) {
        AdminUI.result(res);
        if (res.code === 1) reload();
      });
    });
  });

  $(document).on('click', '.js-theme-disable', function () {
    var id = $(this).data('id');
    AdminUI.confirm('停用后前台将恢复社区自带主题。', function () {
      $.post(URLS.disable, { id: id }, function (res) {
        AdminUI.result(res);
        if (res.code === 1) reload();
      });
    });
  });

  $(document).on('click', '.js-theme-uninstall', function () {
    var id = $(this).data('id');
    AdminUI.confirm('确认卸载该主题？', function () {
      $.post(URLS.uninstall, { id: id }, function (res) {
        AdminUI.result(res);
        if (res.code === 1) reload();
      });
    });
  });
})();
</script>
{/block}