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

<div class="header-container">
  <div class="header-container-title">
    <h2 >
      Crear imagen desde {{ clientName }}
    </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-form-field appearance="fill" class="custom-width">
    <mat-label>Nombre canónico</mat-label>
    <input matInput [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
  </mat-form-field>
</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"
        [disabled]="!row.operativeSystem"
      >
        <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>
