<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="rescueForm" *ngIf="rescueOptions" class="fl-content">
  <app-form-errors #formErrors [formGroup]="rescueForm"></app-form-errors>
  <div layoutDirection="row">
    <div *ngIf="hasImages; else noImages" layoutDirection="column" appFlex="100">
      <h2 class="fl-heading-md" i18n>Select distribution</h2>
      <mat-form-field>
        <mat-label i18n>Image type</mat-label>
        <mat-select [(ngModel)]="imageType" [ngModelOptions]="{standalone: true}"
                    i18n-placeholder placeholder="Image type">
          <ng-container *ngFor="let imageTypeSelect of imageTypes">
            <mat-option [value]="imageTypeSelect" *ngIf="rescueOptions.image[imageTypeSelect.value].length">
              {{imageTypeSelect.display}}
            </mat-option>
          </ng-container>
        </mat-select>
      </mat-form-field>
      <app-images-as-cards #imagesAsCards [images]="rescueOptions.image[imageType.value]"
                           class="fl-margin-bottom-medium"
                           [imageControl]="imageControl">
      </app-images-as-cards>
      <h2 *ngIf="!bootFromIso" class="fl-heading-md fl-margin-bottom-small" i18n>Root password</h2>
      <div *ngIf="!bootFromIso" layoutDirection="row">
        <mat-form-field appFlex="50" class="fl-margin-top-medium">
          <mat-label i18n>Password</mat-label>
          <input matInput i18n-placeholder placeholder="Password" formControlName="root_password"
                 [attr.type]="showPassword ? 'text' : 'password'" required>
          <mat-error>{{fieldErrors['root_password']}}</mat-error>
          <a mat-icon-button matSuffix
             (mousedown)="showPassword = true"
             (mouseup)="showPassword = false"
             [attr.fl-tooltip]="holdButtonText">
            <mat-icon>
              visibility
            </mat-icon>
          </a>
        </mat-form-field>
      </div>
    </div>
    <ng-template #noImages>
      <p class="fl-margin-left" i18n>No usable images found</p>
    </ng-template>
  </div>
</form>
