<div class="container mx-auto px-4 py-8">
  <div class="max-w-5xl mx-auto">
    <details class="mb-4 bg-white border rounded p-4">
      <summary class="cursor-pointer font-semibold">Bu sayfa ne işe yarar? Nasıl kullanırım?</summary>
      <div class="mt-3 text-sm text-gray-700 space-y-2">
        <p><b>Kullanıcılar</b> sayfasında sistem kullanıcılarını görüntüler, yeni kullanıcı ekleyip düzenleyebilirsiniz.</p>
        <p><b>Roller</b>: Kullanıcılara roller atayarak izinlerini belirleyin. İzinler menü ve işlem görünürlüğünü etkiler.</p>
        <p><b>Yetkiler</b>: Bu sayfaya erişim için genelde <i>manage_users</i> izni gerekir.</p>
      </div>
    </details>
    <h1 class="text-2xl font-bold mb-4">Kullanıcılar</h1>

    <% if (success_msg) { %>
      <div class="alert alert-success shadow-sm mb-4"><%= success_msg %></div>
    <% } %>
    <% if (error_msg) { %>
      <div class="alert alert-error shadow-sm mb-4"><%= error_msg %></div>
    <% } %>

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
      <form method="GET" action="/users" class="flex items-center gap-2">
        <input type="text" name="q" value="<%= q || '' %>" placeholder="Kullanıcı adı ara..." class="input input-bordered input-sm w-48">
        <select name="active" class="select select-bordered select-sm">
          <option value="">Tümü</option>
          <option value="1" <%= String(activeParam||'')==='1'?'selected':'' %>>Aktif</option>
          <option value="0" <%= String(activeParam||'')==='0'?'selected':'' %>>Pasif</option>
        </select>
        <select name="perPage" class="select select-bordered select-sm">
          <% const pps = [5,10,20,50]; %>
          <% pps.forEach(function(n){ %>
            <option value="<%= n %>" <%= Number(perPage||10)===n?'selected':'' %>><%= n %>/sayfa</option>
          <% }) %>
        </select>
        <button class="btn btn-primary btn-sm" type="submit">Ara</button>
        <a href="/users" class="btn btn-sm">Temizle</a>
      </form>
      <a href="/users/new" class="btn btn-primary btn-sm">
        <i class="fas fa-plus mr-2"></i>Yeni Kullanıcı
      </a>
    </div>

    <div class="overflow-x-auto bg-white shadow rounded">
      <table class="table table-zebra w-full">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4">ID</th>
            <th class="px-4">Kullanıcı Adı</th>
            <th class="px-4">Durum</th>
            <th class="px-4">İşlemler</th>
          </tr>
        </thead>
        <tbody>
          <% (users || []).forEach(function(u){ %>
            <tr>
              <td class="px-4 py-2"><%= u.id %></td>
              <td class="px-4 py-2"><%= u.username %></td>
              <td class="px-4 py-2">
                <span class="badge <%= Number(u.active)===1 ? 'badge-success' : 'badge-ghost' %>"><%= Number(u.active) === 1 ? 'Aktif' : 'Pasif' %></span>
              </td>
              <td class="px-4 py-2">
                <a href="/users/<%= u.id %>/edit" class="btn btn-xs btn-outline"><i class="fas fa-edit mr-1"></i>Düzenle</a>
                <a href="/users/<%= u.id %>/roles" class="btn btn-xs btn-outline ml-1"><i class="fas fa-user-shield mr-1"></i>Roller</a>
                <form action="/users/<%= u.id %>/delete" method="POST" class="inline ml-1" onsubmit="return confirm('Silinsin mi?')">
                  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                  <button type="submit" class="btn btn-xs btn-error"><i class="fas fa-trash"></i></button>
                </form>
              </td>
            </tr>
          <% }) %>
        </tbody>
      </table>
    </div>
    <% if (typeof page !== 'undefined' && typeof pages !== 'undefined') { %>
      <% const qs = 'q=' + encodeURIComponent(q||'') + '&active=' + encodeURIComponent(activeParam||''); %>
      <%- include('../partials/pagination', { page, pages, total, perPage, qs }) %>
    <% } %>
  </div>
</div>
