<div class="header-container">
  <button mat-icon-button color="primary" (click)="iniciarTour()">
    <mat-icon>help</mat-icon>
  </button>

  <div class="header-container-title">
    <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandsTitle' |
      translate }}</h2>
  </div>

  <div class="images-button-row">
    <button class="action-button" (click)="resetFilters()" joyrideStep="resetFiltersStep"
      text="{{ 'resetFiltersStepText' | translate }}">
      {{ 'resetFilters' | translate }}
    </button>
  </div>
</div>

<div class="search-container">
  <mat-form-field appearance="fill" class="search-select" joyrideStep="clientSelectStep"
    text="{{ 'clientSelectStepText' | translate }}">
    <input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto"
      placeholder="{{ 'filterClientPlaceholder' | translate }}">
    <mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient"
      (optionSelected)="onOptionClientSelected($event.option.value)">
      <mat-option *ngFor="let client of filteredClients | async" [value]="client">
        {{ client.name }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <mat-form-field appearance="fill" class="search-select" joyrideStep="commandSelectStep"
    text="{{ 'commandSelectStepText' | translate }}">
    <input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto"
      placeholder="{{ 'filterCommandPlaceholder' | translate }}">
    <mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand"
      (optionSelected)="onOptionCommandSelected($event.option.value)">
      <mat-option *ngFor="let command of filteredCommands | async" [value]="command">
        {{ command.name }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <mat-form-field appearance="fill" class="search-boolean">
    <mat-label i18n="@@searchLabel">Estado</mat-label>
    <mat-select [(ngModel)]="filters['status']" (selectionChange)="loadTraces()" placeholder="Seleccionar opción">
      <mat-option [value]="undefined">Todos</mat-option>
      <mat-option [value]="'failed'">Fallido</mat-option>
      <mat-option [value]="'pending'">Pendiente de ejecutar</mat-option>
      <mat-option [value]="'in-progress'">Ejecutando</mat-option>
      <mat-option [value]="'success'">Completado con éxito</mat-option>
      <mat-option [value]="'cancelled'">Cancelado</mat-option>
    </mat-select>
  </mat-form-field>
</div>

<app-loading [isLoading]="loading"></app-loading>

<div *ngIf="!loading">
  <table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tableStep"
    text="{{ 'tableStepText' | translate }}">
    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
      <td mat-cell *matCellDef="let trace">

        <ng-container [ngSwitch]="column.columnDef">
          <ng-container *ngSwitchCase="'status'">
            <ng-container *ngIf="trace.status === 'in-progress' && trace.progress; else statusChip">
              <div class="progress-container">
                <mat-progress-bar class="example-margin" [mode]="mode" [value]="trace.progress" [bufferValue]="bufferValue">
                </mat-progress-bar>
                <span>{{trace.progress}}%</span>
              </div>
            </ng-container>
            <ng-template #statusChip>
              <div class="status-progress-flex">
                <mat-chip [ngClass]="{
                    'chip-failed': trace.status === 'failed',
                    'chip-success': trace.status === 'success',
                    'chip-pending': trace.status === 'pending',
                    'chip-in-progress': trace.status === 'in-progress',
                    'chip-cancelled': trace.status === 'cancelled'
                  }">
                  {{
                    trace.status === 'failed' ? 'Fallido' :
                      trace.status === 'in-progress' ? 'En ejecución' :
                        trace.status === 'success' ? 'Finalizado con éxito' :
                          trace.status === 'pending' ? 'Pendiente de ejecutar' :
                            trace.status === 'cancelled' ? 'Cancelado' :
                            trace.status
                  }}
                </mat-chip>
                <button *ngIf="trace.status === 'in-progress' && trace.command === 'deploy-image'"
                        mat-icon-button
                        (click)="cancelTrace(trace)"
                        class="cancel-button"
                        matTooltip="Cancelar transmisión de imagen">
                  <mat-icon>cancel</mat-icon>
                </button>
              </div>
            </ng-template>
          </ng-container>

          <ng-container *ngSwitchCase="'input'">
            <button mat-icon-button (click)="openInputModal(trace.input)">
              <mat-icon>info</mat-icon>
            </button>
          </ng-container>

          <ng-container *ngSwitchDefault>
            {{ column.cell(trace) }}
          </ng-container>
        </ng-container>

      </td>
    </ng-container>


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

<div class="paginator-container" joyrideStep="paginationStep" text="{{ 'paginationStepText' | translate }}">
  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
    (page)="onPageChange($event)">
  </mat-paginator>
</div>
