<form [formGroup]="instanceRebuildForm" *ngIf="rebuildOptions" class="fl-content"
      (ngSubmit)="objectController.actionCallback(primaryAction)">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="instanceRebuildForm"></app-form-errors>
  <div layoutDirection="row">
    <div layoutDirection="column" appFlex="100" class="fl-margin-bottom">
      <h2 class="fl-heading-md" i18n>Rebuild instance</h2>
      <p class="fl-detail" i18n>All data currently on the instance disk will be permanently deleted.</p>
    </div>
  </div>
  <div layoutDirection="row" layoutDirection-lt-md="column">
    <div layoutDirection="column" appFlex="45" ltMdFlex="100">
      <div class="fl-margin-top-small">
        <h2 class="fl-heading-md" i18n>Select boot source</h2>
      </div>
      <app-boot-source-select [images]="rebuildOptions.bootSources.image"
                              [communityImages]="[]"
                              [ownedImages]="rebuildOptions.bootSources.owned_image"
                              [volumes]="[]"
                              [volumeTypes]="[]"
                              [volumeSnapshots]="[]"
                              [sharedImages]="rebuildOptions.bootSources.shared_image"
                              [showStorageSelection]="false"
                              (selectedBootSourceInter)="onBootSourceChange($event)"
                              #bootSourceSelectComponent>
      </app-boot-source-select>
    </div>
  </div>
  <div layoutDirection="row" *ngIf="config.current.settings.instanceForm.showUserData">
    <div layoutDirection="column" appFlex="100">
      <mat-checkbox [color]="'primary'" (change)="switchUserData()" i18n>Cloud-init user data</mat-checkbox>
    </div>
  </div>
  <div layoutDirection="row" *ngIf="showUserData">
    <div layoutDirection="column" appFlex="100">
      <mat-form-field appFlex="100" class="fl-margin-top-medium">
        <mat-label i18n>Cloud-init user data</mat-label>
        <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                  class="fl-userdata-textarea" matInput rows="3" formControlName="user_data"></textarea>
      </mat-form-field>
    </div>
  </div>
  <div layoutDirection="row" class="fl-margin-top">
    <mat-form-field>
      <mat-label i18n>SSH keys</mat-label>
      <mat-select formControlName="ssh_keys" i18n-placeholder placeholder="SSH keys" multiple>
        <ng-container *ngIf="rebuildOptions.ssh_keys.length">
          <mat-option *ngFor="let sshKey of rebuildOptions.ssh_keys" [value]="sshKey.id">
            {{ sshKey.name }}
          </mat-option>
        </ng-container>
        <ng-container *ngIf="rebuildOptions.ssh_keys.length === 0">
          <mat-option disabled i18n>
            No key to choose from
          </mat-option>
        </ng-container>
      </mat-select>
      <mat-hint *ngIf="sshKeysHint">{{ sshKeysHint }}</mat-hint>
      <mat-error>{{ fieldErrors['ssh_keys'] }}</mat-error>
    </mat-form-field>
    <mat-form-field *ngIf="showPasswordInput" class="offset-2">
      <mat-label>{{ passwordLabel }}</mat-label>
      <input matInput [placeholder]="passwordLabel" [type]="showPasswordText ? 'text' : 'password'"
             formControlName="root_password" maxlength="1024"
             [required]="config.current.settings.instanceForm.rootPasswordFieldMandatory && showPasswordInput">
      <mat-hint *ngIf="passwordHint">{{ passwordHint }}</mat-hint>
      <mat-error>{{ instanceRebuildForm.controls.root_password.errors | errorFormatter }}</mat-error>
      <a (mousedown)="showPasswordText = true;"
         (mouseup)="showPasswordText = false;"
         mat-icon-button matSuffix
         [attr.fl-tooltip]="holdButtonTxt">
        <mat-icon>visibility</mat-icon>
      </a>
    </mat-form-field>
  </div>
</form>
