<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <p *ngIf="loading === false && volumesToAttach && volumesToAttach.length === 0" i18n>No volumes to attach.</p>
    <form appFormSubmit (ngSubmit)="attachVolume()" [formGroup]="attachVolumeForm" *ngIf="volumesToAttach.length">
      <app-form-errors #formErrors [formGroup]="attachVolumeForm"></app-form-errors>
      <div layoutDirection="row">
        <mat-form-field appFlex="100">
          <mat-label i18n>Volume</mat-label>
          <mat-select formControlName="volume_id" i18n-placeholder placeholder="Volume">
            <mat-option *ngFor="let volume of volumesToAttach" [value]="volume.id">
              {{volume.display_name || volume.id}}
            </mat-option>
          </mat-select>
          <mat-error i18n>This field is required</mat-error>
        </mat-form-field>
      </div>
    </form>
  </ng-template>
</app-common-dialog>
