{% extends "base.html" %}
{% block title %}Roles - Metafoliador v2{% endblock %}
{% block breadcrumb %}Roles y Permisos{% endblock %}
{% block content %}
<div class="page-header"><h2 class="page-title">Roles y Permisos</h2>
<button class="btn btn-primary" onclick="openRoleModal()" id="btnNewRole" style="display:none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Nuevo Rol</button></div>
<div class="card"><div class="card-body"><div class="table-responsive"><table class="table"><thead><tr>
<th data-sort="name" onclick="sortRoles('name')" style="cursor:pointer">Nombre</th>
<th data-sort="all_permissions" onclick="sortRoles('all_permissions')" style="cursor:pointer">Permisos Totales</th>
<th data-sort="users_count" onclick="sortRoles('users_count')" style="cursor:pointer">Usuarios</th>
<th>Acciones</th>
</tr></thead><tbody id="rolesTable"></tbody></table></div></div></div>
<div class="modal-overlay" id="roleModal"><div class="modal" style="max-width:640px"><div class="modal-header"><h3 id="roleModalTitle">Nuevo Rol</h3><button class="modal-close" onclick="closeRoleModal()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>
<div class="modal-body"><form id="roleForm"><input type="hidden" id="roleId">
<div class="form-group"><label for="roleName">Nombre *</label><input type="text" id="roleName" required></div>
<div class="form-group"><label for="roleDesc">Descripción</label><input type="text" id="roleDesc"></div>
<div class="form-group"><label class="checkbox-label"><input type="checkbox" id="roleAllPerms"><span>Todos los permisos (admin total)</span></label></div>
<div id="permsList" style="max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:12px"></div>
</form></div><div class="modal-footer"><button class="btn btn-secondary" onclick="closeRoleModal()">Cancelar</button><button class="btn btn-primary" onclick="saveRole()">Guardar</button></div></div></div>
{% endblock %}
{% block extra_js %}<script src="/static/js/roles.js"></script>
<script>document.addEventListener("DOMContentLoaded",function(){if(hasPerm("roles.create"))document.getElementById("btnNewRole").style.display="";});</script>{% endblock %}