{% extends "base.html" %}
{% block breadcrumb %}Gestión de Usuarios{% endblock %}

{% block content %}
<div class="page page-users">
    <div class="page-header">
        <h2 class="page-title">Gestión de Usuarios</h2>
        <button class="btn btn-primary" id="btnNewUser">
            <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="table-container">
        <table class="data-table" id="usersTable">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Email</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="4" class="text-center">Cargando...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="modal-overlay" id="modalOverlay" style="display:none">
    <div class="modal" id="userModal">
        <div class="modal-header">
            <h3 id="modalTitle">Nuevo Usuario</h3>
            <button class="modal-close" id="btnModalClose">
                <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" value="">
                <div class="form-group">
                    <label for="userName">Nombre *</label>
                    <input type="text" id="userName" class="form-input" required placeholder="Nombre completo">
                </div>
                <div class="form-group">
                    <label for="userEmail">Correo Electronico *</label>
                    <input type="email" id="userEmail" class="form-input" required placeholder="usuario@correo.com">
                </div>
                <div class="form-group">
                    <label for="userPassword">Contrasena <span id="passwordOptional" style="display:none">(dejar vacio para no cambiar)</span></label>
                    <input type="password" id="userPassword" class="form-input" placeholder="Contrasena">
                </div>
                <div class="form-group">
                    <label for="userActive">Estado</label>
                    <select id="userActive" class="form-input">
                        <option value="true">Activo</option>
                        <option value="false">Inactivo</option>
                    </select>
                </div>
                <div id="modalError" class="error-message" style="display:none"></div>
                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" id="btnCancelModal">Cancelar</button>
                    <button type="submit" class="btn btn-primary" id="btnSaveUser">
                        <span class="btn-text">Guardar</span>
                        <span class="btn-spinner" style="display:none">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-dasharray="31.415" stroke-dashoffset="10"/></svg>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/main/users.js"></script>
{% endblock %}