<!DOCTYPE html>
<html lang="es">
<%- include('../partials/head') %>
<body>
    <div class="container-fluid">
        <div class="row flex-nowrap">
            <%- include('../partials/sidebar') %>

            <div class="col py-3">
                <div class="container" style="max-width: 600px;">
                    <h2 class="mb-4">Registrar Nuevo Empleado</h2>

                    <% if(mensajeError && mensajeError.length > 0) { %>
                        <div class="alert alert-danger"><%= mensajeError %></div>
                    <% } %>

                    <div class="card card-box p-4">
                        <form action="/usuarios/guardar" method="POST">
                            <div class="mb-3">
                                <label class="form-label">Nombre Completo</label>
                                <input type="text" name="nombre_completo" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Correo Electrónico (Usuario)</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Contraseña</label>
                                <input type="password" name="password" class="form-control" required placeholder="******">
                            </div>
                            <div class="mb-4">
                                <label class="form-label">Rol de Acceso</label>
                                <select name="rol" class="form-select">
                                    <option value="empleado">Empleado (Limitado)</option>
                                    <option value="admin">Administrador (Total)</option>
                                </select>
                                <div class="form-text">El Administrador tiene acceso a crear y borrar usuarios.</div>
                            </div>

                            <div class="d-flex justify-content-end gap-2">
                                <a href="/usuarios" class="btn btn-secondary">Cancelar</a>
                                <button type="submit" class="btn btn-primary">Guardar Usuario</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
<%- include('../partials/footer') %>