<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 Rol</b> sayfasında bir rol adı belirleyip ilgili <i>izinleri</i> seçersiniz.</p>
      <p><b>İzinler</b>: Menü görünürlüğünü ve işlem yetkilerini belirler. <i>manage_*</i> izinleri geniş yetkiler verir.</p>
      <p><b>Dikkat</b>: Geniş yetkileri yalnızca güvenilir kullanıcılara verin.</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 Rol</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="/admin/roles/new" method="POST">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <div class="mb-4">
        <label class="block text-sm font-medium mb-1">Rol Adı</label>
        <input type="text" name="name" class="input input-bordered w-full" required>
      </div>
      <div class="mb-4">
        <label class="block text-sm font-medium mb-2">İzinler</label>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
          <% function trRes(res){
               const m = {
                 users:'Kullanıcı', user:'Kullanıcı',
                 roles:'Rol', role:'Rol',
                 channels:'Kanal', channel:'Kanal',
                 posts:'Paylaşım', post:'Paylaşım',
                 pools:'Havuz', pool:'Havuz'
               }; return m[res] || (res ? res.charAt(0).toUpperCase()+res.slice(1) : 'Kaynak'); }
             function trFor(code){
               if (/^manage_/i.test(code)){
                 const res = code.replace(/^manage_/i,'');
                 return { label: trRes(res)+(res.endsWith('s')?'ları':'ları')+' Yönet', desc: trRes(res)+' menüsü ve ilgili işlemlere erişim sağlar.' };
               }
               const m = code.match(/^(create|update|delete)_(.+)$/i);
               if (m){
                 const act = m[1].toLowerCase(); const res = trRes(m[2]);
                 const actTr = act==='create'?'Oluştur':(act==='update'?'Güncelle':'Sil');
                 return { label: res+' '+actTr, desc: res+' '+actTr.toLowerCase()+'me işlemlerini yapar.' };
               }
               return { label: code, desc: 'İlgili yetki.' };
             }
          %>
          <% (permissions || []).forEach(function(p){ const t = trFor(p.code||''); %>
            <div class="border rounded px-3 py-2">
              <label class="inline-flex items-start gap-2 w-full" title="<%= t.desc %>">
                <input type="checkbox" class="checkbox checkbox-sm mt-1" name="permissions" value="<%= p.id %>" <%= (selected && selected.has && selected.has(String(p.id))) ? 'checked' : '' %>>
                <span class="flex-1">
                  <div class="font-medium"><%= t.label %></div>
                  <div class="text-xs text-gray-500"><%= t.desc %></div>
                </span>
              </label>
            </div>
          <% }) %>
        </div>
      </div>
      <div class="flex justify-end gap-2">
        <a href="/admin/roles" class="btn">İptal</a>
        <button type="submit" class="btn btn-primary">Kaydet</button>
      </div>
    </form>
  </div>
</div>
