<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <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>Swift container name</mat-label>
          <input matInput i18n-placeholder placeholder="Swift container name" type="text"
                 formControlName="swift_container">
          <mat-error>{{backupScheduleForm.controls.swift_container.errors | errorFormatter}}</mat-error>
          <mat-hint i18n>Swift container name. Leave blank to use default.</mat-hint>
        </mat-form-field>
        <div>
          <mat-checkbox formControlName="incremental" [color]="'primary'" i18n>Incremental</mat-checkbox>
          <app-icon [icon]="incrementalInfo"></app-icon>
        </div>
        <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>
      </div>
    </form>
  </ng-template>
</app-common-dialog>
