<div class="container mx-auto">
  <h1 class="text-2xl font-bold mb-4">Kullanıcılar</h1>
  <form class="mb-4 flex flex-wrap gap-2 items-end" method="GET">
    <div>
      <label class="text-xs text-gray-500">Ara</label>
      <input type="text" name="q" value="<%= q || '' %>" class="input input-bordered input-sm" placeholder="kullanıcı adı/email">
    </div>
    <div>
      <label class="text-xs text-gray-500">Plan</label>
      <select name="plan" class="select select-bordered select-sm">
        <option value="">Tümü</option>
        <% (plans||[]).forEach(function(p){ %>
          <option value="<%= p.name %>" <%= String(planFilter||'')===String(p.name)?'selected':'' %>><%= p.name %></option>
        <% }) %>
      </select>
    </div>
    <button class="btn btn-primary btn-sm">Ara</button>
    <% if (q||planFilter) { %>
      <a href="/admin/users" class="btn btn-sm">Temizle</a>
    <% } %>
  </form>
  <div class="overflow-x-auto bg-base-100 rounded shadow">
    <table class="table table-zebra">
      <thead>
        <tr>
          <th>ID</th>
          <th>Kullanıcı Adı</th>
          <th>Email</th>
          <th>Plan</th>
          <th>Oluşturulma</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% (users||[]).forEach(function(u){ %>
          <tr>
            <td><%= u.id %></td>
            <td><%= u.username %></td>
            <td><%= u.email %></td>
            <td><span class="badge"><%= u.plan_name || '—' %></span></td>
            <td><%= new Date(u.created_at).toLocaleString('tr-TR', { timeZone: 'Europe/Istanbul' }) %></td>
            <td><a class="btn btn-xs" href="/admin/users/<%= u.id %>">Detay</a></td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
  <% if (typeof page!=='undefined' && typeof pages!=='undefined') { %>
    <% const qs = 'q=' + encodeURIComponent(q||'') + '&plan=' + encodeURIComponent(planFilter||''); %>
    <%- include('../../partials/pagination', { page, pages, total: undefined, perPage: limit, qs }) %>
  <% } %>
</div>
