<!-- Importaciones necesarias -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<!-- Desarrollo -->
<div class="contenedorP">
  <!-- Div superior -->
  <div class="sobremontado">
    <div>
      <button (click)="AgregarParametro()">
        <span class="institution">
          <mat-icon>school</mat-icon>
          <span class="institution-name">Perfiles de Usuario</span>
          <span class="add-icon"  style="margin-left: 20px">+</span>
        </span>
      </button>

      <button class="volver" (click)="volver()">
        <mat-icon>keyboard_arrow_left</mat-icon>
      </button>

    </div>
  </div>
  

  <div class="area-busqueda">
    <input type="text" matInput (keyup)="applyFilter($event)" placeholder="Buscar..." #input style="
    padding: 8px;" />
  </div>


  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>

      <!-- Nro Column -->
      <ng-container matColumnDef="Nro" class="Column1">
        <th class="Column1" mat-header-cell *matHeaderCellDef mat-sort-header> Nro </th>
        <td class="Column1" mat-cell *matCellDef="let i = index"> {{ i+1 }} </td>
      </ng-container>

      

      <!-- Nombre Institución Column -->
      <ng-container matColumnDef="Nombre de Perfil" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header> Nombre de Perfil </th>
        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytperfil_nombre}} </td>
      </ng-container>


      <ng-container matColumnDef="Acciones" class="Column2">
        <th class="Column2" mat-header-cell *matHeaderCellDef> Acciones </th>
        <td class="Column2" mat-cell *matCellDef="let dato">
          <div>
            <!-- Editar -->
            <button>
              <mat-icon class="azul"
                (click)="editParametros(dato.id)">edit</mat-icon>
            </button>
            <!-- Eliminar -->
            <button>
              <mat-icon color="warn" (click)="eliminarParametro(dato.id)">delete</mat-icon>
            </button>
          </div>
        </td>
      </ng-container>


      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

    <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5,10, 20, 50]"></mat-paginator>
  </div>
</div>