<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef" [unlimitedWidth]="true">
  <ng-template #dialogContent>
    <form appFormSubmit (ngSubmit)="saveNotificationsSettings()"
          [formGroup]="notificationsSettingsForm" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="notificationsSettingsForm"></app-form-errors>
      <div layoutDirection="row" appLayoutGap="10px">
        <mat-form-field appFlex="200px">
          <mat-label i18n>Region</mat-label>
          <mat-select formControlName="region"
                      placeholder="Region" i18n-placeholder required>
            <mat-option [value]="'<multiple-regions>'" i18n>Multiple regions</mat-option>
            <mat-option *ngFor="let region of data.regions" [value]="region">{{ region }}</mat-option>
          </mat-select>
          <mat-error>{{ notificationsSettingsForm.controls.region.errors | errorFormatter }}</mat-error>
        </mat-form-field>
      </div>
      <div *ngIf="notificationsSettingsForm.controls.region.value==='<multiple-regions>'">
        <p class="fl-orange-color fl-no-margin-top fl-margin-bottom-small"
           i18n>Warning: "Multiple regions" needs legacy Fleio collector. See <a class="active-link"
            href="https://fleio.com/docs/staff/settings-openstack.html#notifications"
            target="_blank">docs</a> for details.</p>
      </div>
      <div formArrayName="urls" layoutDirection="column">
        <div *ngFor="let url of urlsSettings.controls; let index = index;" [formGroupName]="index">
          <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px" layoutAlign="start center">
            <mat-form-field appFlex="40">
              <mat-label i18n>Notifications URL</mat-label>
              <input matInput placeholder="Notifications URL" i18n-placeholder type="text" formControlName="url"
                     required>
              <mat-error>{{ url.controls.url.errors | errorFormatter }}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Topic</mat-label>
              <input matInput placeholder="Topic" i18n-placeholder type="text" formControlName="topic"
                     required>
              <mat-error>{{ url.controls.topic.errors | errorFormatter }}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Exchange</mat-label>
              <input matInput placeholder="Exchange" i18n-placeholder type="text" formControlName="exchange"
                     required>
              <mat-error>{{ url.controls.exchange.errors | errorFormatter }}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Pool</mat-label>
              <input matInput placeholder="Pool" i18n-placeholder type="text" formControlName="pool"
                     required>
              <mat-error>{{ url.controls.pool.errors | errorFormatter }}</mat-error>
            </mat-form-field>
            <div>
              <a (click)="deleteUrlSettings(index)">
                <mat-icon>delete</mat-icon>
              </a>
            </div>
          </div>
          <mat-checkbox formControlName="amqp_durable_queues" i18n>
            AMQP durable queues
          </mat-checkbox>
        </div>

        <div layoutDirection="row" layoutAlign="center">
          <a mat-fab fl-tooltip="Add new URL" i18n-fl-tooltip (click)="addUrlSettings()">
            <mat-icon>add</mat-icon>
          </a>
        </div>
      </div>
    </form>
  </ng-template>
</app-common-dialog>
