<main class="main-container animated fadeIn">
  <app-btn-navigate navigate="/sam/GEPR" [nameButton]="interService.get('S002V01M03GEPR')" [changeLanguage]="true" />
  <mat-card class="override-card-normal override-elevation-z8">
    <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>

    <nav class="override-nav">
      <div class="w-100 align-center pv-15">
        <span class="title-card">{{ interService.get('S002V01F02BUMU') }}</span>
      </div>
    </nav>

    <mat-tab-group>
      <mat-tab [label]="interService.get('busqueda_solicitudes')">

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

        <div class="tab_item_search" *ngIf="!isLoadingRequest">
          <section class="override-section">
            <div class="override-actions mt-16">
              <app-search-card 
              [dataSource]="dataSourceRequest" 
              [disabled]="isLoadingRequest || isLoadingForm" 
              [label]="interService.get('buscador')" 
              [placeholder]="interService.get('ingrese_palabra_buscar')" 
              [btnRemoveFilter]="interService.get('eliminar_filtro')" 
              (dataValue)="dataSourceRequest = $event" />

              <div class="override-buttons">
                <app-btn-resize 
                class="mr-8"
                [disabled]="isLoadingRequest || isLoadingForm"
                backgroundColor="primary" 
                textColor="white_font" 
                [nameButton]="interService.get('buscar')" 
                icon="search"
                (click)="openSearchRequest()" />
              </div>
            </div>
            <div class="container_table">
              <table mat-table matSort [dataSource]="dataSourceRequest" class="animated fadeIn" [style.display]="isLoadingRequest ? 'none' : 'revert'">
                <ng-container matColumnDef="NOMBRE_WORKFLOW">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('nombre_flujo_trabajo') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.NOMBRE_WORKFLOW }} </td>
                </ng-container>
                <ng-container matColumnDef="ID_EJECUCION_WORKFLOW">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('ejecucion_flujo_trabajo') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.ID_EJECUCION_WORKFLOW }} </td>
                </ng-container>
                <ng-container matColumnDef="ESTADO_EJECUCION_WORKFLOW">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('estado_ejecucion_flujo_trabajo') }} </th>
                  <td mat-cell *matCellDef="let element">
                    <mat-chip [class]="resourcesService.setChipList(element.ESTADO_EJECUCION_WORKFLOW)" selected> {{ element.ESTADO_EJECUCION_WORKFLOW }} </mat-chip>
                  </td>
                </ng-container>
                <ng-container matColumnDef="NOMBRE_TAREA">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('nombre_de_la_tarea') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.NOMBRE_TAREA }} </td>
                </ng-container>
                <ng-container matColumnDef="ID_EJECUCION_TAREA">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('ejecucion_tarea') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.ID_EJECUCION_TAREA }} </td>
                </ng-container>
                <ng-container matColumnDef="ESTADO_EJECUCION_TAREA">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('estado_ejecucion_tarea') }} </th>
                  <td mat-cell *matCellDef="let element">
                    <mat-chip [class]="resourcesService.setChipList(element.ESTADO_EJECUCION_TAREA)" selected> {{ element.ESTADO_EJECUCION_TAREA }} </mat-chip>
                  </td>
                </ng-container>
                <ng-container matColumnDef="NOMBRE_PROCESO">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('nombre_proceso') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.NOMBRE_PROCESO }} </td>
                </ng-container>
                <ng-container matColumnDef="USUARIO_MODIFICA">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('usuario_modificacion') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.USUARIO_MODIFICA }} </td>
                </ng-container>
                <ng-container matColumnDef="FECHA_MODIFICA">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('fecha_actualizacion') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.FECHA_MODIFICA }} </td>
                </ng-container>
                <ng-container matColumnDef="ACCIONES">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('acciones') }} </th>
                  <td mat-cell *matCellDef="let element">
                    <button 
                    mat-mini-fab 
                    color="primary"
                    class="override_no_shadow ml-4 white_font pink_primary_background" 
                    (click)="viewDetailsRequest(element)"
                    [matTooltip]="interService.get('ver_detalles_solicitud')"  
                    [disabled]="isLoadingForm">
                      <mat-icon>visibility</mat-icon>
                    </button>
                  </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumnsRequest"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumnsRequest"></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>
          </section>
          <mat-paginator [pageSizeOptions]="[10, 20, 50]" class="override-paginator" showFirstLastButtons #paginatorRequest="matPaginator"></mat-paginator>
        </div>
          
      </mat-tab>
      <mat-tab [label]="interService.get('busqueda_notificaciones')">

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

        <div class="tab_item_search" *ngIf="!isLoadingNotificate">
          <section class="override-section">
            <div class="override-actions mt-16">
              <app-search-card 
              [dataSource]="dataSourceNotificate" 
              [disabled]="isLoadingNotificate || isLoadingForm" 
              [label]="interService.get('buscador')" 
              [placeholder]="interService.get('ingrese_palabra_buscar')" 
              [btnRemoveFilter]="interService.get('eliminar_filtro')" 
              (dataValue)="dataSourceNotificate = $event" />

              <div class="override-buttons">
                <app-btn-resize 
                backgroundColor="primary" 
                textColor="white_font" 
                icon="search"
                class="mr-8"
                [disabled]="isLoadingNotificate || isLoadingForm"
                [nameButton]="interService.get('buscar')" 
                (click)="openSearchNotificate()" />
              </div>
            </div>
            <div class="container_table">
              <table mat-table matSort [dataSource]="dataSourceNotificate" class="animated fadeIn" [style.display]="isLoadingNotificate ? 'none' : 'revert'">
                <ng-container matColumnDef="ID_NOTIFICACION">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('no_notificacion') }} </th>
                  <td mat-cell *matCellDef="let element"> #{{ element.ID_NOTIFICACION }} </td>
                </ng-container>
                <ng-container matColumnDef="ID_EJECUCION_TAREA">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('numero_ejecucion_tarea') }} </th>
                  <td mat-cell *matCellDef="let element"> #{{ element.ID_EJECUCION_TAREA }} </td>
                </ng-container>
                <ng-container matColumnDef="USUARIO_NOTIFICACION">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('usuario_notificado') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.USUARIO_NOTIFICACION }} </td>
                </ng-container>
                <ng-container matColumnDef="TIPO_NOTIFICACION">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('tipo_notificacion') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.TIPO_NOTIFICACION }} </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"> 
                    <mat-chip [class]="resourcesService.setChipList(element.ESTADO)" selected> {{ element.ESTADO }} </mat-chip>
                  </td>
                </ng-container>
                <ng-container matColumnDef="USUARIO_MODIFICA">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('usuario_modificacion') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.USUARIO_MODIFICA }} </td>
                </ng-container>
                <ng-container matColumnDef="FECHA_MODIFICA">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('fecha_actualizacion') }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element.FECHA_MODIFICA }} </td>
                </ng-container>
                <ng-container matColumnDef="ACCIONES">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ interService.get('acciones') }} </th>
                  <td mat-cell *matCellDef="let element">
                    <button 
                    mat-mini-fab 
                    color="primary"
                    class="override_no_shadow ml-4" 
                    (click)="viewDetailsNotificate(element)"
                    [matTooltip]="interService.get('ver_detalles_solicitud')"  
                    [disabled]="isLoadingForm">
                      <mat-icon>info</mat-icon>
                    </button>
                  </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumnsNotificate"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumnsNotificate"></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>
          </section>
          <mat-paginator [pageSizeOptions]="[10, 20, 50]" class="override-paginator" showFirstLastButtons #paginatorNotificate="matPaginator"></mat-paginator>
        </div>

      </mat-tab>
    </mat-tab-group>
  </mat-card>
</main>