@extends('layouts.app')
@section('title', 'Agentes')
@section('eyebrow', 'Construir')
@section('page-title', 'Agentes')
@section('page-description', 'Crea, configura y supervisa los agentes de tu organización.')
@section('page-actions')<a href="{{ route('agents.create') }}" class="btn btn-primary"><i class="bi bi-plus-lg me-2"></i>Nuevo agente</a>@endsection
@section('content')
<section class="content-card">
    <div class="table-toolbar">
        <div class="search-box"><i class="bi bi-search"></i><input id="agentSearch" type="search" placeholder="Buscar por nombre o modelo…" aria-label="Buscar agentes"></div>
        <div class="d-flex gap-2"><select id="statusFilter" class="form-select form-select-sm filter-select" aria-label="Filtrar por estado"><option value="">Todos los estados</option><option value="active">Activos</option><option value="inactive">Inactivos</option></select><button class="btn btn-light btn-sm"><i class="bi bi-sliders me-2"></i>Filtros</button></div>
    </div>
    <div class="table-responsive"><table class="table agents-table align-middle mb-0"><thead><tr><th>Agente</th><th>Modelo</th><th>Estado</th><th>Tools</th><th>Última modificación</th><th></th></tr></thead><tbody id="agentsTableBody"><tr><td colspan="6" class="loading-cell"><span class="spinner-border spinner-border-sm me-2"></span>Cargando agentes…</td></tr></tbody></table></div>
    <div class="table-footer"><span id="tableSummary">—</span><div class="pagination-mini"><button disabled><i class="bi bi-chevron-left"></i></button><span>1</span><button disabled><i class="bi bi-chevron-right"></i></button></div></div>
</section>
@endsection