<div class="container mx-auto px-4 py-8">
  <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>Yeni Kullanıcı</b> ile sisteme yeni bir hesap eklersiniz. <i>Kullanıcı adı</i> ve <i>şifre</i> zorunludur.</p>
      <p><b>Aktif</b>: İşaretliyse kullanıcı giriş yapabilir. Roller daha sonra atanabilir.</p>
      <p><b>Yetkiler</b>: Bu sayfa için <i>manage_users</i> izni gerekir.</p>
    </div>
  </details>
  <div class="max-w-xl mx-auto bg-white shadow rounded p-6">
    <h1 class="text-2xl font-bold mb-4">Yeni Kullanıcı</h1>

    <% if (errors && errors.length) { %>
      <div class="alert alert-error shadow-sm mb-4">
        <ul class="list-disc list-inside">
          <% errors.forEach(function(e){ %>
            <li><%= e.msg %></li>
          <% }) %>
        </ul>
      </div>
    <% } %>

    <form action="/users/new" method="POST">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <div class="mb-4">
        <label class="block text-sm font-medium mb-1">Kullanıcı Adı</label>
        <input type="text" name="username" value="<%= (old && old.username) || '' %>" class="input input-bordered w-full" required>
      </div>
      <div class="mb-4">
        <label class="block text-sm font-medium mb-1">Şifre</label>
        <input type="password" name="password" class="input input-bordered w-full" required>
      </div>
      <div class="mb-6">
        <label class="label cursor-pointer justify-start gap-2">
          <input type="checkbox" name="active" value="1" class="checkbox checkbox-sm" <%= (old && old.active === '1') ? 'checked' : 'checked' %>>
          <span class="label-text">Aktif</span>
        </label>
      </div>
      <div class="flex justify-end gap-2">
        <a href="/users" class="btn">İptal</a>
        <button type="submit" class="btn btn-primary">Kaydet</button>
      </div>
    </form>
  </div>
</div>
