{{template "layout.html" .}}
<div class="card" style="max-width:720px">
  <div class="card-hd">{{.title}}</div>
  <div class="card-bd">
    <form id="roleForm">
      {{if .role.ID}}<input type="hidden" name="id" value="{{.role.ID}}">{{end}}
      <div class="fg">
        <label>角色名称</label>
        <input type="text" name="name" class="fctrl" value="{{.role.Name}}" required>
      </div>
      <div class="fg">
        <label>角色代码</label>
        <input type="text" name="code" class="fctrl" value="{{.role.Code}}"{{if .role.ID}} readonly style="background:var(--gray-50)"{{end}} required placeholder="如：editor, viewer">
      </div>
      <div class="fg">
        <label>描述</label>
        <input type="text" name="description" class="fctrl" value="{{.role.Description}}">
      </div>
      <div class="fg">
        <label style="display:block;margin-bottom:8px">权限</label>
        <div id="permList" style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-size:13px">
        </div>
        <input type="hidden" name="permissions" id="permissionsInput" value='{{.role.Permissions}}'>
      </div>
      <div style="padding-top:6px">
        <button type="submit" class="btn btn-primary">保存</button>
        <a href="/admin/role" class="btn btn-ghost">返回</a>
      </div>
    </form>
  </div>
</div>
<script>
var permGroups = [];
fetch('/admin/role/permissions')
  .then(function(r){return r.json()})
  .then(function(d){
    permGroups = d.data;
    renderPerms();
  });

var selectedPerms = [];
try {
  var raw = document.getElementById('permissionsInput').value;
  if(raw) selectedPerms = JSON.parse(raw);
} catch(e){}

function renderPerms(){
  var list=document.getElementById('permList');list.innerHTML='';
  permGroups.forEach(function(g){
    var div=document.createElement('div');
    div.style.cssText='border:1px solid var(--gray-100);border-radius:6px;padding:8px';
    div.innerHTML='<div style="font-weight:600;margin-bottom:4px;font-size:12px;color:var(--gray-500)">'+g.group+'</div>';
    g.perms.forEach(function(p){
      var label=document.createElement('label');
      label.style.cssText='display:flex;align-items:center;gap:4px;padding:2px 0;cursor:pointer';
      var cb=document.createElement('input');
      cb.type='checkbox';cb.value=p.value;cb.checked=selectedPerms.indexOf(p.value)>=0;
      cb.style.cssText='accent-color:var(--primary)';
      cb.addEventListener('change',updatePerms);
      label.appendChild(cb);
      label.appendChild(document.createTextNode(p.label));
      div.appendChild(label);
    });
    list.appendChild(div);
  });
}

function updatePerms(){
  selectedPerms=[];
  document.querySelectorAll('#permList input[type="checkbox"]:checked').forEach(function(cb){
    selectedPerms.push(cb.value);
  });
  document.getElementById('permissionsInput').value=JSON.stringify(selectedPerms);
}

document.getElementById('roleForm').addEventListener('submit',function(e){
  e.preventDefault();var btn=this.querySelector('button[type="submit"]');btn.disabled=true;btn.textContent='保存中…';
  var url='{{if .role.ID}}/admin/role/update{{else}}/admin/role/save{{end}}';
  fetch(url,{method:'POST',body:new FormData(this)})
    .then(function(r){return r.json()})
    .then(function(d){if(d.code===0){location.href='/admin/role'}else{resultModal('❌','保存失败',d.msg);btn.disabled=false;btn.textContent='保存'}})
    .catch(function(){btn.disabled=false;btn.textContent='保存';resultModal('⚠️','请求失败','网络错误，请检查网络连接后重试')});
});
</script>

</body>
</html>