<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12 p-5 bg-white">

            <div class="row">
                <div class="col">
                    <h4>Gestão de agentes</h4>
                </div>
                <div class="col text-end">
                    <a href="#" class="btn btn-secondary"><i class="fa-solid fa-user-plus me-2"></i>Novo agente</a>
                </div>
            </div>

            <hr>

            <p class="my-5 text-center opacity-75">Não existem agentes registados.</p>

            <div class="mb-5 text-center">
            <a href="#" class="btn btn-secondary px-4"><i class="fa-solid fa-chevron-left me-2"></i>Voltar</a>
            </div>

            <table class="table table-striped table-bordered">
                <thead class="table-dark">
                    <tr>
                        <th>Nome</th>
                        <th class="text-center">Perfil</th>
                        <th class="text-center">Último login</th>
                        <th class="text-center">Total clientes</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>[Nome do agente]</td>
                        <td class="text-center">[perfil]</td>
                        <td class="text-center">[último login]</td>
                        <td class="text-center">[total clientes]</td>
                        <td class="text-end">
                            <a href="#"><i class="fa-regular fa-pen-to-square me-2"></i>Editar</a>
                            <span class="mx-2 opacity-50">|</span>
                            <a href="#"><i class="fa-solid fa-trash-can me-2"></i>Eliminar</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="row">
                <div class="col">
                    <p class="mb-5">Total: <strong>[0]</strong></p>
                </div>
                <div class="col text-end">
                    <a href="#" class="btn btn-secondary px-4"><i class="fa-regular fa-file-excel me-2"></i>Exportar para XLSX</a>
                    <a href="#" class="btn btn-secondary px-4"><i class="fa-solid fa-chevron-left me-2"></i>Voltar</a>
                </div>
            </div>
            
        </div>
    </div>
</div>