<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <p class="fl-important-text" i18n>Warning: instance will not be available during the backup process.</p>
    <form appFormSubmit (ngSubmit)="createSchedule()" [formGroup]="backupScheduleForm">
      <app-form-errors #formErrors [formGroup]="backupScheduleForm"></app-form-errors>
      <div layoutDirection="column">
        <mat-form-field>
          <mat-label i18n>Backup schedule name</mat-label>
          <input matInput i18n-placeholder placeholder="Backup schedule name" type="text"
                 formControlName="backup_name" required>
          <mat-error>{{backupScheduleForm.controls.backup_name.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label i18n>Backup schedule type</mat-label>
          <mat-select formControlName="backup_type" (selectionChange)="changedBackupType()" i18n-placeholder
                      placeholder="Backup schedule type" required>
            <mat-option [value]="'daily'" i18n>
              Daily
            </mat-option>
            <mat-option [value]="'every_other_day'" i18n>
              Every other day
            </mat-option>
            <mat-option [value]="'weekly'" i18n>
              Weekly
            </mat-option>
          </mat-select>
          <mat-error>{{backupScheduleForm.controls.backup_type.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <mat-form-field *ngIf="auth.feature('ui.openstack.instances.backup_schedules.select_hour')">
          <mat-label i18n>Hour (UTC time)</mat-label>
          <mat-select formControlName="hour" i18n-placeholder placeholder="Hour (UTC time)" required>
            <mat-option *ngFor="let hour of hourChoices" [value]="hour">
              {{hourDisplay(hour)}}
            </mat-option>
          </mat-select>
          <mat-error>{{backupScheduleForm.controls.hour.errors | errorFormatter }}</mat-error>
        </mat-form-field>
        <mat-form-field *ngIf="backupType.value === 'weekly'">
          <mat-label i18n>Day</mat-label>
          <mat-select formControlName="day" i18n-placeholder placeholder="Day" required>
            <mat-option *ngFor="let day of daysChoices" [value]="day">
              {{dayOfWeekAsString(day)}}
            </mat-option>
          </mat-select>
          <mat-error>{{backupScheduleForm.controls.day.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label i18n>Rotation</mat-label>
          <input matInput i18n-placeholder placeholder="Rotation" type="number" min="1" step="1"
                 formControlName="rotation" required>
          <mat-hint i18n>Number of backups to keep (the rest of the selected type will be deleted)</mat-hint>
          <mat-error>{{backupScheduleForm.controls.rotation.errors | errorFormatter}}</mat-error>
        </mat-form-field>
      </div>
    </form>
  </ng-template>
</app-common-dialog>
