@if (!isFromDashboard) {
  <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">
  @if (!isFromDashboard) {
    <mat-form-field appearance="fill" class="search-string">
      <mat-label>{{ 'ogbootServer' | translate }}</mat-label>
      <mat-select [(ngModel)]="selectedServerId" [ngModelOptions]="{standalone: true}" (selectionChange)="onServerChange()">
        @for (server of bootServers; track server['@id']) {
          <mat-option [value]="server.uuid || server['@id'].split('/').pop()">
            {{ server.name }}
          </mat-option>
        }
      </mat-select>
    </mat-form-field>
  }

  <mat-form-field appearance="fill" class="search-boolean" joyrideStep="selectClassStep"
    text="{{ 'selectClassDescription' | translate }}">
    <mat-label>{{ 'labelSelectClass' | translate }}</mat-label>
    <mat-select (selectionChange)="loadChildUnits($event)" (opened)="unitSearchText = ''">
      <div class="dropdown-search-wrapper">
        <input type="text" class="dropdown-search-input" [(ngModel)]="unitSearchText" [ngModelOptions]="{standalone: true}" (keydown)="$event.stopPropagation()"
          placeholder="{{ 'labelSearch' | translate }}">
      </div>
      @for (unit of getFilteredUnits(); track unit.id) {
        <mat-option [value]="unit">{{ unit.displayName }}</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>{{ 'labelApplyToAll' | translate }}</mat-label>
    <mat-select [(value)]="globalOgLive" (selectionChange)="applyToAll()">
      @for (option of ogLiveOptions; track option['@id']) {
        <mat-option [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 }}">
    {{ 'labelSaveButton' | translate }}
  </button>
</div>

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

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

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

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

  <ng-container matColumnDef="ogLive">
    <mat-header-cell *matHeaderCellDef>{{ 'pxeTemplate' | 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>
          @for (template of ogLiveOptions; track template['@id']) {
            <mat-option [value]="template['@id']">
              {{ template.name }}
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="bootServer">
    <mat-header-cell *matHeaderCellDef> {{ 'labelServer' | translate }}</mat-header-cell>
    <mat-cell *matCellDef="let element">
      <span [class.text-warning]="element.bootServer?.uuid !== selectedServerId"
            style="display: flex; align-items: center;"
            [title]="element.bootServer?.uuid !== selectedServerId ? 'Este equipo cambiará al servidor actual al guardar' : ''">
        {{ element.bootServer?.name || 'Ninguno' }}
        @if (element.bootServer?.uuid && element.bootServer.uuid !== selectedServerId) {
          <mat-icon style="font-size: 16px; width: 16px; height: 16px; margin-left: 4px; color: orange;">warning</mat-icon>
        }
      </span>
    </mat-cell>
  </ng-container>

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