{extend name="common/layout" /}
{block name="title"}引用图标{/block}
{block name="css"}
<style>
.icon-ref-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.icon-ref-toolbar .form-control{max-width:280px}
.icon-ref-meta{color:var(--bs-secondary-color,#8a97a5);font-size:12px;margin-left:auto}
.icon-ref-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:10px;
}
.icon-ref-item{
  border:1px solid var(--bs-border-color,#e6eef0);
  border-radius:10px;
  background:var(--bs-body-bg,#fff);
  padding:14px 8px 10px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease;
  user-select:none;
}
.icon-ref-item:hover{
  border-color:rgba(var(--bs-primary-rgb),.45);
  box-shadow:0 4px 14px rgba(var(--bs-primary-rgb),.12);
  transform:translateY(-1px);
}
.icon-ref-item:active{transform:translateY(0)}
.icon-ref-item i{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;color:var(--bs-body-color,#313a46);
  margin-bottom:8px;
}
.icon-ref-item em{
  display:block;font-style:normal;font-size:11px;line-height:1.3;
  color:var(--bs-secondary-color,#8a97a5);word-break:break-all;
}
.icon-ref-item.is-copied{
  border-color:var(--bs-success,#22b783);
  background:rgba(34,183,131,.08);
}
.icon-ref-empty{
  text-align:center;padding:48px 16px;color:var(--bs-secondary-color,#8a97a5);
}
.icon-ref-pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:16px}
</style>
{/block}
{block name="content"}
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title mb-0">引用图标 <small class="text-muted fw-normal">Remix Icon</small></h4>
      </div>
      <div class="card-body">
        <div class="icon-ref-toolbar">
          <input type="search" class="form-control form-control-sm" id="icon-keyword" placeholder="搜索图标，如 home、settings、close">
          <select class="form-select form-select-sm" id="icon-style" style="max-width:140px">
            <option value="all">全部样式</option>
            <option value="line" selected>线性 Line</option>
            <option value="fill">填充 Fill</option>
          </select>
          <button type="button" class="btn btn-primary btn-sm" id="btn-search"><i class="ri-search-line"></i> 查询</button>
          <span class="icon-ref-meta" id="icon-meta">点击图标即可复制类名</span>
        </div>
        <div class="icon-ref-grid" id="icon-grid"></div>
        <div class="icon-ref-empty" id="icon-empty" hidden>没有匹配的图标</div>
        <div class="icon-ref-pager" id="icon-pager" hidden>
          <button type="button" class="btn btn-light btn-sm" id="btn-prev">上一页</button>
          <span id="icon-page-info" class="text-muted small"></span>
          <button type="button" class="btn btn-light btn-sm" id="btn-next">下一页</button>
        </div>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="js"}
<script>
(function () {
  var page = 1;
  var limit = 120;
  var total = 0;
  var $grid = $('#icon-grid');
  var $empty = $('#icon-empty');
  var $pager = $('#icon-pager');
  var $meta = $('#icon-meta');
  var $pageInfo = $('#icon-page-info');

  function copyText(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      return navigator.clipboard.writeText(text);
    }
    return new Promise(function (resolve, reject) {
      var ta = document.createElement('textarea');
      ta.value = text;
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand('copy') ? resolve() : reject();
      } catch (e) {
        reject(e);
      }
      document.body.removeChild(ta);
    });
  }

  function render(rows) {
    $grid.empty();
    if (!rows.length) {
      $empty.prop('hidden', false);
      $pager.prop('hidden', true);
      return;
    }
    $empty.prop('hidden', true);
    var html = '';
    rows.forEach(function (row) {
      html += '<button type="button" class="icon-ref-item" data-class="' + row.class + '" title="点击复制 ' + row.class + '">' +
        '<i class="' + row.class + '"></i><em>' + row.class + '</em></button>';
    });
    $grid.html(html);
    var pages = Math.max(1, Math.ceil(total / limit));
    $pager.prop('hidden', pages <= 1);
    $pageInfo.text(page + ' / ' + pages + '　共 ' + total + ' 个');
    $meta.text('共 ' + total + ' 个，点击复制类名');
  }

  function load() {
    $.getJSON("{:url('/admin/icon/list')}", {
      keyword: $.trim($('#icon-keyword').val() || ''),
      style: $('#icon-style').val() || 'all',
      page: page,
      limit: limit
    }).done(function (res) {
      total = parseInt(res.total || res.count || 0, 10) || 0;
      render(res.rows || res.data || []);
    }).fail(function () {
      AdminUI.notify('加载图标失败', 'danger');
    });
  }

  $grid.on('click', '.icon-ref-item', function () {
    var $item = $(this);
    var cls = $item.attr('data-class') || '';
    if (!cls) return;
    copyText(cls).then(function () {
      $grid.find('.icon-ref-item').removeClass('is-copied');
      $item.addClass('is-copied');
      AdminUI.notify('已复制：' + cls, 'success');
      $meta.text('已复制 ' + cls);
    }).catch(function () {
      AdminUI.notify('复制失败，请手动选择：' + cls, 'warning');
    });
  });

  $('#btn-search').on('click', function () { page = 1; load(); });
  $('#icon-keyword').on('keydown', function (e) {
    if (e.key === 'Enter') { e.preventDefault(); page = 1; load(); }
  });
  $('#icon-style').on('change', function () { page = 1; load(); });
  $('#btn-prev').on('click', function () {
    if (page <= 1) return;
    page--;
    load();
  });
  $('#btn-next').on('click', function () {
    if (page * limit >= total) return;
    page++;
    load();
  });

  load();
})();
</script>
{/block}