<main class="main-container animated fadeIn">
  <app-btn-navigate navigate="/sam/GPRS" nameButton="Gestión de personal, recursos y subcontratistas" />
  <mat-card class="override-card override-elevation-z8">
      <mat-card-header class="card_header">
          <mat-card-title class="align-center">Organigrama</mat-card-title>
          <div class="card_actions">
              <div class="card_action_filters">
                  <app-search-card [dataSource]="dataSource" [disabled]="isLoading" (dataValue)="dataSource = $event"/>
              </div>
              <div class="card_action_items">
                  <button 
                      mat-mini-fab 
                      matTooltip="Actualizar datos"
                      [disabled]="isLoading"
                      class="orange_primary_background white_font override_no_shadow ml-8">
                      <mat-icon>refresh</mat-icon>
                  </button>
              </div>
          </div>
      </mat-card-header>

      <app-loading-card [isLoading]="isLoading" txtLoading="Cargando la información de los organigramas" />
      @if (!isLoading) {
          <div class="content_table">
              <table mat-table matSort [dataSource]="dataSource" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
                  <ng-container matColumnDef="Nombre_completo">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre Completo</th>
                      <td mat-cell *matCellDef="let element">{{ element.nombre_completo }}</td>
                  </ng-container>
                  <ng-container matColumnDef="Supervisor_1">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header>Supervisor 1</th>
                      <td mat-cell *matCellDef="let element">{{ element.supervisor1 }}</td>
                  </ng-container>
                  <ng-container matColumnDef="Supervisor_2">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header>Supervisor 2</th>
                      <td mat-cell *matCellDef="let element">{{ element.supervisor2 == null ? 'No configurado': element.supervisor2 }}</td>
                  </ng-container>
                  <ng-container matColumnDef="Acciones">
                      <th mat-header-cell *matHeaderCellDef>Acciones</th>
                      <td mat-cell *matCellDef="let element">
                            <button 
                              mat-mini-fab 
                              color="primary" 
                              [disabled]="isLoading" 
                              (click)="openOrganizationEdit(element)"
                              #menuTrigger 
                              matTooltip="Editar organigrama"
                              class="override_no_shadow  white_font orange_primary_background gray_dark_font">
                              <mat-icon>edit</mat-icon>
                          </button>
                            <button 
                              *ngIf="element.nombre_completo"
                              mat-mini-fab 
                              color="primary" 
                              [disabled]="isLoading" 
                              (click)="openBlockMenu(element)"
                              #menuTrigger 
                              matTooltip="Bloquear usuario"
                              class="override_no_shadow  white_font red_primary_background gray_dark_font ml-4">
                              <mat-icon>block</mat-icon>
                        </button>
                      </td>
                  </ng-container>
          
                  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
                  <tr class="mat-row" *matNoDataRow>
                      <td class="mat-cell p-20 align-center" colspan="12">
                          <object data="assets/img/empty_data.svg" width="150"></object>
                          <h2>Sin datos</h2>
                      </td>
                  </tr>
              </table>
          </div>
      }
      <mat-paginator [pageSizeOptions]="[10, 20, 50]" class="override-paginator" showFirstLastButtons></mat-paginator>
  </mat-card>
</main>