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

<div class="header-container">
  <div class="header-container-title">
    <h2>
      {{ 'deployImage' | translate }}
    </h2>
  </div>
  <div class="button-row">
    <button class="action-button" (click)="save()">Ejecutar</button>
  </div>
</div>
<mat-divider></mat-divider>

<div class="select-container">
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title> Clientes </mat-panel-title>
      <mat-panel-description> Listado de clientes donde se desplegará la imagen </mat-panel-description>
    </mat-expansion-panel-header>

      <div class="clients-grid" >
        <div *ngFor="let client of clientData" class="client-item">
          <div class="client-card">
            <img
              [src]="'assets/images/ordenador_' + client.status + '.png'"
              alt="Client Icon"
              class="client-image" />

            <div class="client-details">
              <span class="client-name">{{ client.name }}</span>
              <span class="client-ip">{{ client.ip }}</span>
              <span class="client-ip">{{ client.mac }}</span>
            </div>
          </div>
        </div>
      </div>
  </mat-expansion-panel>
</div>

<mat-divider style="margin-top: 20px;"></mat-divider>

<div class="select-container">
  <div class="deploy-container">
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>Seleccione imagen</mat-label>
      <mat-select [(ngModel)]="selectedImage" name="selectedImage">
        <mat-option *ngFor="let image of images" [value]="image">{{ image.image?.name }}</mat-option>
      </mat-select>
      <mat-hint *ngIf="clientData">Imágenes alojadas en {{ clientData[0].repository?.name }}</mat-hint>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width">
      <mat-label>Seleccione método de deploy</mat-label>
      <mat-select [(ngModel)]="selectedMethod" name="selectedMethod">
        <mat-option *ngFor="let method of allMethods" [value]="method">{{ method }}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: start">Seleccionar partición</th>
    <td mat-cell *matCellDef="let row">
      <mat-radio-group [(ngModel)]="selectedPartition" name="selectedPartition">
        <mat-radio-button [value]="row">
        </mat-radio-button>
      </mat-radio-group>
    </td>
  </ng-container>

  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
    <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
    <td mat-cell *matCellDef="let image">
      {{ column.cell(image) }}
    </td>
  </ng-container>

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

<mat-divider></mat-divider>
<div class="options-container">
  <h3 *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">Opciones multicast</h3>
  <h3 *ngIf="isMethod('p2p')" class="input-group">Opciones torrent</h3>
  <div *ngIf="isMethod('udpcast') || isMethod('uftp') || isMethod('udpcast-direct')" class="input-group">
    <mat-form-field appearance="fill" class="input-field">
      <mat-label>Puerto</mat-label>
      <input matInput [(ngModel)]="mcastPort" name="mcastPort" type="number">
    </mat-form-field>

    <mat-form-field appearance="fill" class="input-field">
      <mat-label>Dirección</mat-label>
      <input matInput [(ngModel)]="mcastIp" name="mcastIp">
    </mat-form-field>

    <mat-form-field appearance="fill" class="input-field">
      <mat-label i18n="@@mcastModeLabel">Modo Multicast</mat-label>
      <mat-select [(ngModel)]="mcastMode" name="mcastMode">
        <mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
          {{ option.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="fill" class="input-field">
      <mat-label>Velocidad</mat-label>
      <input matInput [(ngModel)]="mcastSpeed" name="mcastSpeed" type="number">
    </mat-form-field>

    <mat-form-field appearance="fill" class="input-field">
      <mat-label>Máximo Clientes</mat-label>
      <input matInput [(ngModel)]="mcastMaxClients" name="mcastMaxClients" type="number">
    </mat-form-field>

    <mat-form-field appearance="fill" class="input-field">
      <mat-label>Tiempo Máximo de Espera</mat-label>
      <input matInput [(ngModel)]="mcastMaxTime" name="mcastMaxTime" type="number">
    </mat-form-field>
  </div>

  <div *ngIf="isMethod('p2p')" class="input-group">
    <mat-form-field appearance="fill" class="input-field">
      <mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
      <mat-select [(ngModel)]="p2pMode" name="p2pMode">
        <mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
          {{ option.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="fill" class="input-field">
      <mat-label>Semilla</mat-label>
      <input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number">
    </mat-form-field>
  </div>
</div>

