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

<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]="'adminImagesDescription' | translate">
      {{ 'adminImagesTitle' | translate }}
    </h2>
  </div>
  <div class="images-button-row">
    <button class="action-button" (click)="openSubnetInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
    <button class="action-button" (click)="addImage()" joyrideStep="addImageStep"
      [text]="'addOgLiveButtonDescription' | translate">
      {{ 'addOgLiveButton' | translate }}
    </button>
  </div>
</div>

<div class="search-container">
  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
    [text]="'searchNameDescription' | translate">
    <mat-label>{{ 'searchLabel' | translate }}</mat-label>
    <input matInput [placeholder]="'searchPlaceholder' | translate" [(ngModel)]="filters['name']"
      (keyup.enter)="search()">
    <mat-icon matSuffix>search</mat-icon>
    <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
  </mat-form-field>

  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchDefaultImageStep"
    [text]="'searchDefaultDescription' | translate">
    <mat-label>{{ 'searchDefaultLabel' | translate }}</mat-label>
    <mat-select [(ngModel)]="filters['isDefault']" (selectionChange)="search()"
      [placeholder]="'selectOptionPlaceholder' | translate">
      <mat-option [value]="''">{{ 'allOption' | translate }}</mat-option>
      <mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
      <mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchInstalledStep"
    [text]="'searchInstalledDescription' | translate">
    <mat-label>{{ 'status' | translate }}</mat-label>
    <mat-select [(ngModel)]="filters['status']" (selectionChange)="search()"
      [placeholder]="'selectOptionPlaceholder' | translate">
      <mat-option [value]="'inactive'">{{ 'inactiveOption' | translate }}</mat-option>
      <mat-option [value]="'active'">{{ 'activeOption' | translate }}</mat-option>
      <mat-option [value]="'failed'">{{ 'failedOption' | translate }}</mat-option>
      <mat-option [value]="'pending'">{{ 'pendingOption' | translate }}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

<app-loading [isLoading]="loading"></app-loading>
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
  [text]="'tableDescription' | translate">
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
    <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>
    <td mat-cell *matCellDef="let image">
      <ng-container *ngIf="column.columnDef === 'isDefault'">
        <mat-icon [color]="image[column.columnDef] ? 'primary' : 'warn'">
          <ng-container *ngIf="image[column.columnDef]; else cancelIcon">
            {{ 'checkCircle' | translate }}
          </ng-container>
          <ng-template #cancelIcon>
            {{ 'cancelIcon' | translate }}
          </ng-template>
        </mat-icon>
      </ng-container>

      <ng-container *ngIf="column.columnDef === 'downloadUrl'">
        <span matTooltip="{{ image.downloadUrl }}">
          {{ image.downloadUrl ? image.downloadUrl.substring(0, 20) + '...' : '' }}
        </span>
      </ng-container>

      <ng-container *ngIf="column.columnDef === 'name'">
        <span matTooltip="{{ image.name }}">
          {{ image.name }}
        </span>
      </ng-container>

      <ng-container *ngIf="column.columnDef === 'status'">
        <mat-chip [ngClass]="getStatusLabel(image.status).class">
          {{ getStatusLabel(image.status).label }}
        </mat-chip>
      </ng-container>

      <ng-container
        *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'downloadUrl' && column.columnDef !== 'status' && column.columnDef !== 'name'">
        {{ column.cell(image) }}
      </ng-container>
    </td>
  </ng-container>

  <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'actionsColumnHeader' | translate }}</th>
    <td mat-cell *matCellDef="let image" style="text-align: center;" joyrideStep="actionsStep"
      [text]="'actionsDescription' | translate">
      <button mat-icon-button color="info" (click)="showOgLive($event, image)">
        <mat-icon>{{ 'viewIcon' | translate }}</mat-icon>
      </button>
      <button mat-icon-button disabled color="primary" (click)="editImage(image)">
        <mat-icon>{{ 'editIcon' | translate }}</mat-icon>
      </button>
      <button mat-icon-button color="warn" (click)="deleteImage(image)">
        <mat-icon>{{ 'deleteIcon' | translate }}</mat-icon>
      </button>
      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>menu</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item [disabled]="image.status !== 'inactive'" (click)="toggleAction(image, 'install')">{{ 'installOption' |
          translate }}</button>
        <button mat-menu-item [disabled]="image.status !== 'active'" (click)="toggleAction(image, 'uninstall')">
          {{ 'uninstallOption' | translate }}
        </button>
        <button mat-menu-item [disabled]="image.status !== 'active'" (click)="toggleAction(image, 'set-default')">
          {{ 'setDefaultOption' | translate }}
        </button>
      </mat-menu>
    </td>
  </ng-container>

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

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