<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="{{ 'advancedNetbootDescription' | translate }}">
      {{ 'advancedNetbootTitle' | translate }}
    </h2>
  </div>
</div>

<div [formGroup]="taskForm" class="search-container">
  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="selectClassStep"
    text="{{ 'selectClassDescription' | translate }}">
    <mat-label>{{ 'selectClassLabel' | translate }}</mat-label>
    <mat-select (selectionChange)="loadChildUnits($event)">
      <mat-option *ngFor="let unit of units" [value]="unit">{{ unit.name }}</mat-option>
    </mat-select>
  </mat-form-field>
</div>


<div class="global-selectors">
  <mat-form-field appearance="fill" class="selected-global" joyrideStep="applyToAllStep"
    text="{{ 'applyToAllDescription' | translate }}">
    <mat-label>{{ 'applyToAllLabel' | translate }}</mat-label>
    <mat-select [(value)]="globalOgLive" (selectionChange)="applyToAll()">
      <mat-option *ngFor="let option of ogLiveOptions" [value]="option['@id']">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <button class="action-button" [disabled]="units.length === 0" (click)="saveOgLiveTemplates()"
    joyrideStep="saveButtonStep" text="{{ 'saveButtonDescription' | translate }}">
    {{ 'saveButtonLabel' | translate }}
  </button>
</div>

<mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
  text="{{ 'tableDescription' | translate }}">
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef>{{ 'idColumnHeader' | translate }}</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.id }} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>{{ 'nameColumnHeader' | translate }}</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.name }} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="ip">
    <mat-header-cell *matHeaderCellDef>{{ 'nameColumnHeader' | translate }}</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.ip }} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="mac">
    <mat-header-cell *matHeaderCellDef>{{ 'nameColumnHeader' | translate }}</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{ element.mac }} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="ogLive">
    <mat-header-cell *matHeaderCellDef>{{ 'templateColumnHeader' | translate }}</mat-header-cell>
    <mat-cell *matCellDef="let client">
      <mat-form-field appearance="fill" joyrideStep="selectTemplateStep"
        text="{{ 'selectTemplateDescription' | translate }}">
        <mat-label>{{ 'selectTemplateLabel' | translate }}</mat-label>
        <mat-select [(ngModel)]="client.ogLive" [name]="'ogLive' + client.id">
          <mat-option [value]="null">{{ 'noTemplateOption' | translate }}</mat-option>
          <mat-option *ngFor="let template of ogLiveOptions" [value]="template['@id']">
            {{ template.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-cell>
  </ng-container>

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