{% extends "base.html" %}
{% block title %}Usuarios - Metafoliador v2{% endblock %}
{% block breadcrumb %}Usuarios del Sistema{% endblock %}
{% block content %}
<div class="page-header"><h2 class="page-title">Usuarios del Sistema</h2>
<button class="btn btn-primary" onclick="openModal()" id="btnNewUser" 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 Usuario</button></div>
<div class="card"><div class="card-body"><div class="table-responsive"><table class="table"><thead><tr>
<th data-sort="name" onclick="sortUsers('name')" style="cursor:pointer">Nombre</th>
<th data-sort="email" onclick="sortUsers('email')" style="cursor:pointer">Email</th>
<th data-sort="role" onclick="sortUsers('role')" style="cursor:pointer">Rol</th>
<th data-sort="active" onclick="sortUsers('active')" style="cursor:pointer">Estado</th>
<th>Acciones</th>
</tr></thead><tbody id="usersTable"></tbody></table></div></div></div>
<div class="modal-overlay" id="modalOverlay">
<div class="modal"><div class="modal-header"><h3 id="modalTitle">Nuevo Usuario</h3><button class="modal-close" onclick="closeModal()"><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="userForm"><input type="hidden" id="userId">
<div class="form-row"><div class="form-group"><label for="userName">Nombre</label><input type="text" id="userName" placeholder="Nombre completo"></div><div class="form-group"><label for="userEmail">Email *</label><input type="email" id="userEmail" required></div></div>
<div class="form-row"><div class="form-group"><label for="userPassword">Contraseña <span id="passHint"></span></label><input type="password" id="userPassword"></div><div class="form-group"><label for="userRole">Rol</label><select id="userRole"></select></div></div>
<div class="form-group"><label class="checkbox-label"><input type="checkbox" id="userActive" checked><span>Usuario activo</span></label></div>
</form></div><div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal()">Cancelar</button><button class="btn btn-primary" onclick="saveUser()">Guardar</button></div></div></div>
{% endblock %}
{% block extra_js %}<script src="/static/js/usuarios.js"></script>
<script>document.addEventListener("DOMContentLoaded",function(){if(hasPerm("usuarios.create"))document.getElementById("btnNewUser").style.display="";});</script>{% endblock %}