<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="notificationsLoading" overlayParent></app-fl-backdrop>
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="notificationsForm"></app-form-errors>
  <div layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
    <form appFormSubmit (ngSubmit)="save()" [formGroup]="notificationsForm"
          layoutDirection="column" appFlex="70" xsFlex="100">
      <p *ngIf="notificationSettingsChanged" class="fl-orange-color fl-no-margin-top fl-margin-bottom-small"
         i18n>Notification settings have been changed. Use the Save button below to apply changes.</p>
      <ng-container
        *ngFor="let regionNotificationsSettings of regionsNotificationsSettings; let last=last; let index=index">
        <div layoutDirection="row" layoutAlign="start center">
          <h3 *ngIf="regionNotificationsSettings.region === '<multiple-regions>'" appFlex="auto"
              i18n>Notification settings for region: <i>Multiple regions</i></h3>
          <h3 *ngIf="regionNotificationsSettings.region !== '<multiple-regions>'" appFlex="auto"
              i18n>Notification settings for region: {{regionNotificationsSettings.region}}</h3>
          <div>
            <a (click)="editRegionNotificationsSettings(index)">
              <mat-icon>edit</mat-icon>
            </a>
            <a (click)="deleteRegionNotificationsSettings(index)">
              <mat-icon>delete</mat-icon>
            </a>
          </div>
        </div>
        <div class="url-settings fl-margin-bottom-medium" *ngFor="let urlSettings of regionNotificationsSettings.urls">
          <p [ngClass]="{'fl-red-color': urlSettings.invalid}"><span class="fl-detail">URL: </span>{{urlSettings.url}}
          </p>
          <p><span class="fl-detail">Topic: </span>{{urlSettings.topic}}</p>
          <p><span class="fl-detail">Exchange: </span>{{urlSettings.exchange}}</p>
          <p><span class="fl-detail">Pool name: </span>{{urlSettings.pool}}</p>
        </div>
        <mat-divider *ngIf="!last"></mat-divider>
      </ng-container>
      <a mat-button color="primary" (click)="addRegionNotificationsSettings()">
        Add region settings
      </a>
      <mat-checkbox formControlName="amqp_durable_queues" i18n>
        AMQP durable queues
      </mat-checkbox>
    </form>
    <div layoutDirection="column" class="fl-help-text hide-xs" appFlex="50" appLayoutGap="10px">
      <h3 i18n>Notification settings for region</h3>
      <p class="fl-detail" i18n>
        You can define notifications settings per region. Use "Multiple regions" if you use 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>
      <h3 i18n>URL</h3>
      <p class="fl-detail" i18n>
        The messaging broker URL where to listen for notifications.
        Fleio updates it's internal state using notifications from OpenStack services.<br>
        The broker URL should use one of the following protocols: 'rabbit', 'amqp', 'kombu', 'pika', 'zmq' or 'kafka'.<br>
        The broker URL should also contain username and password if needed. Example:<br>
        rabbit://user:password&#64;rabbit.yourdomain.com:5672/<br>
        For security reasons Notifications URL password will be hidden after saving settings and it will not be displayed
        when editing existing settings.
      </p>
      <h3 i18n>Topic</h3>
      <p class="fl-detail" i18n>
        The notifications topic where notifications are sent by services or the fleio-collector service.
        Multiple topics can be specie, separated by ',' (ex: "notifications, notifications_bis").
        Usually there is one topic called 'notifications'.
        If the fleio-collector service is used, the default topic is 'fleio'.
      </p>
      <h3 i18n>Exchange</h3>
      <p class="fl-detail" i18n>
        The OpenStack services send notifications to different exchanges.
        The default exchanges used by Fleio are: 'cinder', 'glance', 'designate, 'keystone', 'neutron', 'nova',
        'openstack', 'magnum' and 'trove'.
        If the fleio-collector service is used, only one exchange is required named by default 'fleio'.
      </p>
      <h3 i18n>Pool name</h3>
      <p class="fl-detail" i18n>
        The pool name is required if multiple consumers listen to the same topic.
        If ceilometer is installed, set this to a valid name, like 'fleio'.
        Note that if you want to change the pool once set, you will have to manually
        delete the previous queue created since Fleio is unable to do that.
      </p>
      <h3 i18n>AMQP durable queues</h3>
      <p class="fl-detail" i18n>
        Checking this will use durable queues by default. You should only check this if you set
        <span class="fl-bold">amqp_durable_queues</span> in OpenStack services configuration. This can be overwritten on
        per URL basis.
        <span class="fl-bold">If you are using AMQP durable queues make sure not to include exchanges not defined in OpenStack!</span>
      </p>
    </div>
  </div>
  <div layoutDirection="row" layoutAlign="end" appLayoutGap="10px" layoutDirection-xs="column">
    <a mat-button class="fl-margin-top" (click)="test()" i18n>
      Test connections
    </a>
    <a mat-button class="fl-margin-top" [color]="'primary'" (click)="save()" i18n>Save</a>
  </div>
</div>
