<% if (typeof page !== 'undefined' && typeof pages !== 'undefined' && pages > 0) { %>
<div class="mt-4 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
  <div class="text-sm text-gray-600">
    <% if (typeof total !== 'undefined') { %>
      Toplam <%= total %> kayıt
    <% } %>
    | Sayfa <%= page %>/<%= pages %>
  </div>
  <div class="inline-flex flex-wrap gap-1 max-w-full overflow-x-auto">
    <% if (page > 1) { %>
      <a class="btn btn-sm" href="?<%= qs %>&page=<%= page-1 %>&perPage=<%= perPage %>">Önceki</a>
    <% } else { %>
      <span class="btn btn-sm btn-disabled">Önceki</span>
    <% } %>

    <% 
      const totalPages = Number(pages);
      const current = Number(page);
      const windowSize = 2; // current etrafında gösterilecek sayfa
      let start = Math.max(2, current - windowSize);
      let end = Math.min(totalPages - 1, current + windowSize);
      if (current <= 1 + windowSize) { start = 2; end = Math.min(2 + 2*windowSize, totalPages - 1); }
      if (current >= totalPages - windowSize) { start = Math.max(2, totalPages - 1 - 2*windowSize); end = totalPages - 1; }
    %>

    <!-- First page -->
    <a class="btn btn-sm <%= current===1 ? 'btn-primary' : '' %>" href="?<%= qs %>&page=1&perPage=<%= perPage %>">1</a>

    <!-- Left ellipsis -->
    <% if (start > 2) { %>
      <span class="btn btn-sm btn-disabled">...</span>
    <% } %>

    <!-- Middle window -->
    <% for (let i = start; i <= end; i++) { %>
      <a class="btn btn-sm <%= i===current ? 'btn-primary' : '' %>" href="?<%= qs %>&page=<%= i %>&perPage=<%= perPage %>"><%= i %></a>
    <% } %>

    <!-- Right ellipsis -->
    <% if (end < totalPages - 1) { %>
      <span class="btn btn-sm btn-disabled">...</span>
    <% } %>

    <!-- Last page -->
    <% if (totalPages > 1) { %>
      <a class="btn btn-sm <%= totalPages===current ? 'btn-primary' : '' %>" href="?<%= qs %>&page=<%= totalPages %>&perPage=<%= perPage %>"><%= totalPages %></a>
    <% } %>

    <% if (page < pages) { %>
      <a class="btn btn-sm" href="?<%= qs %>&page=<%= page+1 %>&perPage=<%= perPage %>">Sonraki</a>
    <% } else { %>
      <span class="btn btn-sm btn-disabled">Sonraki</span>
    <% } %>
  </div>
</div>
<% } %>
