<main class="main-container animated fadeIn">
  <app-btn-navigate
    navigate="/sam/GEPR"
    [nameButton]="interService.get('S002V01M03GEPR')"
    [changeLanguage]="true"
  />
  <mat-card class="override-card override-elevation-z8">
    @if (isLoadingForm) {
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    }
    <section class="override-section">
      <nav class="override-nav">
        <div class="w-100 align-center pv-15">
          <span class="title-card">{{
            interService.get("S002V01S02GETA")
          }}</span>
        </div>
        <div class="override-actions">
          <app-search-card
            [dataSource]="dataSource"
            [disabled]="isLoading || isLoadingForm"
            [label]="interService.get('buscador')"
            [placeholder]="interService.get('ingrese_palabra_buscar')"
            [btnRemoveFilter]="interService.get('eliminar_filtro')"
            (dataValue)="dataSource = $event"
          />

          <div class="override-buttons">
            @if (canAddTasks) {
            <app-btn-resize
              class="mr-8"
              (click)="goForm('REG')"
              [disabled]="isLoading || isLoadingForm"
              [textColor]="'white_font'"
              backgroundColor="raised-button-background"
              [nameButton]="interService.get('nuevo')"
              [icon]="'add'"
            />
            }
            <button
              mat-mini-fab
              [matTooltip]="interService.get('actualizar_datos')"
              (click)="getTasks()"
              class="orange_primary_background white_font override_no_shadow ml-8"
            >
              <mat-icon>refresh</mat-icon>
            </button>
          </div>
        </div>
      </nav>

      <app-loading-card
        [isLoading]="isLoading"
        [txtLoading]="interService.get('cargando_informacion_tareas')"
      />

      @if (!isLoading){
      <div class="override-table">
        <table mat-table matSort [dataSource]="dataSource">
          <ng-container matColumnDef="ID_TAREA" style="display: none">
            <th mat-header-cell *matHeaderCellDef style="display: none">ID</th>
            <td mat-cell *matCellDef="let element" style="display: none">
              {{ element.ID_TAREA }}
            </td>
          </ng-container>
          <ng-container matColumnDef="SECUENCIA_NUM">
            <th mat-header-cell *matHeaderCellDef>
              {{ interService.get("no_tarea") }}
            </th>
            <td mat-cell *matCellDef="let element; let index = index">
              #{{ getSequenceNumber(index) }}
            </td>
          </ng-container>
          <ng-container matColumnDef="NOMBRE_TAREA">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("nombre_tarea") }}
            </th>
            <td mat-cell *matCellDef="let element">
              {{ element.NOMBRE_TAREA }}
            </td>
          </ng-container>
          <ng-container matColumnDef="DESCRIPCION">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("descripcion") }}
            </th>
            <td mat-cell *matCellDef="let element">
              {{ element.DESCRIPCION }}
            </td>
          </ng-container>
          <ng-container matColumnDef="SECUENCIA">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("secuencia") }}
            </th>
            <td mat-cell *matCellDef="let element">{{ element.SECUENCIA }}</td>
          </ng-container>
          <ng-container matColumnDef="REQUIERE_VALIDACION">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("requiere_validacion") }}
            </th>
            <td mat-cell *matCellDef="let element" style="text-align: center">
              <mat-icon
                [ngClass]="
                  element.REQUIERE_VALIDACION === 1
                    ? 'green_primary_font'
                    : 'red_primary_font'
                "
              >
                {{
                  element.REQUIERE_VALIDACION === 1 ? "check_circle" : "cancel"
                }}
              </mat-icon>
            </td>
          </ng-container>
          <ng-container matColumnDef="REGLA_VALIDACION">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("regla_validacion") }}
            </th>
            <td mat-cell *matCellDef="let element">
              {{ element.REGLA_VALIDACION }}
            </td>
          </ng-container>
          <ng-container matColumnDef="ESTADO">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ interService.get("estado") }}
            </th>
            <td mat-cell *matCellDef="let element">
              <button
                mat-flat-button
                [class]="resourcesService.setChipList(element.ESTADO)"
                class="white_font"
              >
                {{ element.ESTADO }}
              </button>
            </td>
          </ng-container>
          <ng-container matColumnDef="ACCIONES">
            <th mat-header-cell *matHeaderCellDef>
              {{ interService.get("acciones") }}
            </th>
            <td mat-cell *matCellDef="let element" style="text-align: center">
              <button
                mat-mini-fab
                color="primary"
                class="override_no_shadow gray_dark_font transparent_background"
                [matTooltip]="interService.get('clic_desplegar')"
                [matMenuTriggerFor]="menu"
                [disabled]="isLoadingForm"
                #menuTrigger
              >
                <mat-icon>more_vert</mat-icon>
              </button>
              <mat-menu #menu="matMenu">
                @if (element.ESTADO === 'Borrador') {
                  <button mat-menu-item (click)="editTask(element)">
                    <mat-icon>edit</mat-icon> {{ interService.get("editar") }}
                  </button>
                  <button mat-menu-item (click)="alert(element)">
                    <mat-icon>delete</mat-icon> {{ interService.get("eliminar") }}
                  </button>
                }
                <button mat-menu-item (click)="viewTaskDetails(element)">
                  <mat-icon>visibility</mat-icon> {{ interService.get("ver_informacion") }}
                </button>
              </mat-menu>
            </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="8">
              <object data="assets/img/empty_data.svg" width="150"></object>
              <h2>{{ interService.get("sin_datos") }}</h2>
            </td>
          </tr>
        </table>
      </div>
      }
    </section>
    <mat-paginator
      [pageSizeOptions]="[10, 20, 50]"
      class="override-paginator"
      showFirstLastButtons
    ></mat-paginator>
  </mat-card>
</main>
