<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form class="fl-margin-top-medium" [formGroup]="updateDatabaseAccessibilityForm" appFormSubmit layoutDirection="column"
          (ngSubmit)="updateAccessibility()">
      <app-form-errors #formErrors [formGroup]="updateDatabaseAccessibilityForm"></app-form-errors>
      <div layoutDirection="row">
        <mat-checkbox formControlName="is_public" [color]="'primary'" i18n>
          Is public
        </mat-checkbox>
        <app-icon [icon]="isPublicInfoIcon"></app-icon>
      </div>
      <h2 class="fl-heading-md" i18n>Allowed CIDRs</h2>
      <p class="fl-detail fl-margin-bottom" i18n>
        Define a list of IPv4, IPv6 or mix of both CIDRs that restrict access to the database service.
        0.0.0.0/0 is used by default if this list is empty.
      </p>
      <div formArrayName="allowed_cidrs" layoutDirection="row"
      *ngFor="let fixedIp of updateDatabaseAccessibilityForm.get('allowed_cidrs')['controls']; let i = index;">
        <div [formGroupName]="i" layoutDirection="row">
          <mat-form-field>
            <mat-label i18n>Address</mat-label>
            <input matInput formControlName="address" placeholder="Address" i18n-placeholder
                   type="text" required>
            <mat-error i18n>{{fixedIp.controls["address"].errors | errorFormatter}}</mat-error>
            <button mat-icon-button matSuffix (click)="removeAddress(i)" fl-tooltip="Remove address" i18n-fl-tooltip>
              <mat-icon>delete</mat-icon>
            </button>
          </mat-form-field>
        </div>
      </div>
      <button mat-mini-fab class="add-item-button fl-margin-top-small fl-margin-left-small fl-margin-bottom-medium"
              fl-tooltip="Add address" i18n-fl-tooltip fl-tooltip-direction="right"
              (click)="addAddress()">
        <mat-icon>add</mat-icon>
      </button>
    </form>
  </ng-template>
</app-common-dialog>
