<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>Rolü Düzenle</b> sayfasında rol adını ve izinlerini güncellersiniz.</p>
      <p><b>İzinler</b>: Menü görünürlüğü ve işlem yetkilerini belirler. <i>manage_*</i> izinleri kritik yetkiler verir.</p>
      <p><b>Dikkat</b>: Geniş yetkileri sadece güvenilir kullanıcılara tanımlayın.</p>
    </div>
  </details>
  <div class="max-w-2xl mx-auto bg-white shadow rounded p-6">
    <h1 class="text-2xl font-bold mb-4">Rolü Düzenle</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/<%= role.id %>/edit" 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" value="<%= role.name %>" class="input input-bordered w-full" required>
      </div>

      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 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',
                 logs:'Kayıt', log:'Kayıt'
               }; return m[res] || (res ? res.charAt(0).toUpperCase()+res.slice(1) : 'Kaynak'); }
             function trFor(code){
               // özel kodlar
               const exact = {
                 'view_logs': { label: 'Audit Kayıtlarını Görüntüle', desc: 'Audit (işlem) kayıtları sayfasını görüntüleme yetkisi.' },
                 'view_posts': { label: 'Paylaşımları Görüntüle', desc: 'Paylaşımları listeleme sayfalarına erişim.' },
                 'send_now': { label: 'Anında Gönder', desc: 'Paylaşımı hemen, zamanlamadan bağımsız gönderme izni.' },
                 'schedule_post': { label: 'Paylaşım Zamanla', desc: 'Paylaşımı belirli bir tarih/saatte veya günlük olacak şekilde planlama izni.' },
                 'edit_post': { label: 'Paylaşım Düzenle', desc: 'Mevcut paylaşımı düzenleme izni.' },
               };
               if (exact[code]) return exact[code];
               // manage_*
               if (/^manage_/i.test(code)){
                 const res = code.replace(/^manage_/i,'');
                 const group = trRes(res)+(res.endsWith('s')?'ları':'ları');
                 return { label: group+' Yönet', desc: group+' menüsü ve ilgili işlemlere erişim sağlar.' };
               }
               // create_/update_/delete_
               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.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">Geri</a>
        <button type="submit" class="btn btn-primary">Güncelle</button>
      </div>
    </form>
  </div>
</div>
