{% load i18n %}
<div style="display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:15px;padding-top:10px;border-top:1px solid var(--border-color)">
  <span style="color:var(--text-secondary);font-size:13px;margin-right:auto">
    {% blocktranslate count total=cl.result_count %}共 {{ total }} 条{% plural %}共 {{ total }} 条{% endblocktranslate %}
  </span>

  <div class="layui-laypage" style="margin:0">
    {% if cl.page_num > 1 %}
    <a href="?p={{ cl.page_num|add:-1 }}" class="layui-laypage-prev">&lt;</a>
    {% endif %}

    {% for i in page_range %}
    {% if i == cl.paginator.ELLIPSIS %}
    <span class="layui-laypage-spr">…</span>
    {% elif i == cl.page_num %}
    <span class="layui-laypage-curr">
      <em class="layui-laypage-em" style="background-color:var(--primary-color)"></em>
      <em>{{ i }}</em>
    </span>
    {% else %}
    <a href="?p={{ i }}" data-page="{{ i }}">{{ i }}</a>
    {% endif %}
    {% endfor %}

    {% if cl.page_num < cl.paginator.num_pages %}
    <a href="?p={{ cl.page_num|add:1 }}" class="layui-laypage-next">&gt;</a>
    {% endif %}
  </div>

  <span class="layui-laypage-skip" style="margin:0;display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--text-secondary)">
    {% translate 'Jump to' %}
    <input type="text" id="gotoPage" value="{{ cl.page_num }}"
      style="width:36px;height:26px;border:1px solid var(--border-color);border-radius:3px;text-align:center;font-size:12px;outline:none;color:var(--text-primary)">
    {% translate 'page' %}
    <button type="button" id="gotoBtn"
      style="height:26px;line-height:26px;padding:0 10px;border:1px solid var(--primary-color);border-radius:3px;background:var(--primary-color);color:#fff;font-size:12px;cursor:pointer;white-space:nowrap">{% translate 'Go' %}</button>
  </span>

  <span class="layui-laypage-limits" style="margin:0;display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--text-secondary)">
    <select id="pageSizeSelect" style="height:26px;padding:2px 6px;border:1px solid var(--border-color);border-radius:3px;font-size:12px;outline:none;cursor:pointer;color:var(--text-primary);background:var(--bg-primary)">
      <option value="10"{% if cl.list_per_page == 10 %} selected{% endif %}>10 {% translate '条/页' %}</option>
      <option value="30"{% if cl.list_per_page == 30 %} selected{% endif %}>30 {% translate '条/页' %}</option>
      <option value="50"{% if cl.list_per_page == 50 %} selected{% endif %}>50 {% translate '条/页' %}</option>
      <option value="100"{% if cl.list_per_page == 100 %} selected{% endif %}>100 {% translate '条/页' %}</option>
    </select>
  </span>
</div>

<script>
(function(){
  var btn = document.getElementById('gotoBtn');
  var input = document.getElementById('gotoPage');
  if (btn && input) {
    function go() {
      var p = parseInt(input.value) || 1;
      var max = Math.max(1, {{ cl.paginator.num_pages }});
      if (p < 1) p = 1;
      if (p > max) p = max;
      var url = new URL(window.location.href);
      url.searchParams.set('p', p);
      window.location.href = url.toString();
    }
    btn.addEventListener('click', go);
    input.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') go();
    });
  }
  var sel = document.getElementById('pageSizeSelect');
  if (sel) {
    sel.addEventListener('change', function() {
      var url = new URL(window.location.href);
      url.searchParams.set('per_page', this.value);
      url.searchParams.delete('p');
      window.location.href = url.toString();
    });
  }
})();
</script>