<div class="container-fluid pt-3">
    <!-- Título -->
    <div class="text-center">
        <h1 class="display-4">Usuários</h1>
    </div>

    <div class="barra-ferramentas">
        <!-- Pesquisa no canto esquerdo -->
        <div class="me-auto">
          <input
            type="text"
            class="form-control d-inline-block"
            placeholder="Pesquise um nome"
            [(ngModel)]="filtroNome"
            (input)="filtrarUsuarios()"
          />
        </div>
      
        <!-- Botão Toggle -->
        <div class="form-check form-switch">
        <label for="switchPerfil" class="d-flex justify-content-between">
            <span>Funcionário</span>
          <input
            class="form-check-input"
            type="checkbox"
            id="filtroPerfilSwitch"
            (change)="alternarFiltroPerfil()"
            [checked]="filtroPerfil === 'Administrador'"
          />
          <span>Administrador</span>
        </label>
        </div>
      </div>

    <!-- Tabela -->
    <div class="card mx-auto mt-4" style="width: 80%; background-color: #E4832E;">
        <div class="card-body">
            <div class="table-responsive">
              <table class="table table-bordered text-center">
                <thead>
                  <tr>
                    <th>Nome</th>
                    <th>Email</th>
                    <th>CPF</th>
                    <th>Setor</th>
                    <th>Cargo</th>
                    <th>Perfil</th>
                    <th>
                      <a
                        [routerLink]="['/usuarios/novo']"
                        href="#"
                        title="Novo"
                        alt="Novo"
                        class="btn btn-xs btn-success"
                      >
                        <i class="fa fa-plus" aria-hidden="true"></i> Novo
                      </a>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let usuario of usuariosFiltrados">
                    <td>{{ usuario.nome }}</td>
                    <td>{{ usuario.email }}</td>
                    <td>{{ formatarCPF(usuario.cpf) }}</td>
                    <td>{{ usuario.setor }}</td>
                    <td>{{ usuario.cargo }}</td>
                    <td>{{ usuario.perfil }}</td>
                    <td>
                      <button
                        class="btn btn-info btn-sm me-2"
                        [routerLink]="['/usuarios/editar', usuario.id]"
                        title="Editar"
                      >
                        Editar
                      </button>
                      <button
                        *ngIf="usuario.id !== usuarioLogadoId"
                        class="btn btn-danger btn-sm"
                        (click)="remover($event, usuario)"
                        title="Excluir"
                      >
                        Inativar
                      </button>                       
                    </td>
                  </tr>
                  <tr *ngIf="usuariosFiltrados.length === 0">
                    <td colspan="7" class="text-center text-white">Nenhuma pessoa encontrada.</td>
                  </tr>
                </tbody>
              </table>
              
              <!-- <p *ngIf="usuariosFiltrados.length > 0">
                Total de usuários: {{ usuariosFiltrados.length }}
              </p> -->
            </div>
        </div>
    </div>
</div>
