<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <div *ngIf="availableOptions && !availableOptions.length" i18n>
      There are no available options.
    </div>
    <app-form-errors #formErrors [formGroup]="associateOptionForm"></app-form-errors>
    <form [formGroup]="associateOptionForm" *ngIf="availableOptions && availableOptions.length">
      <mat-form-field appFlex="100">
        <mat-label i18n>Select configurable option</mat-label>
        <mat-select formControlName="selectedOption" placeholder="Select configurable option" i18n-placeholder>
          <mat-option *ngFor="let option of availableOptions" [value]="option.id">
            {{option.display_name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </form>
    <ng-container *ngIf="selectedOption && servicesCount">
      <p class="fl-no-margin-top fl-no-margin-bottom" *ngIf="selectedOption.default_value; else noDefault" i18n>
        <ng-container *ngIf="servicesCount > 1; else defValueOneService">
          There are {{servicesCount}} services with this product. This will add the configurable options to the
          {{servicesCount}} services with default value: {{selectedOption.default_value}}.
        </ng-container>
        <ng-template #defValueOneService>
          There is 1 service with this product. This will add the configurable options to the service
          with default value: {{selectedOption.default_value}}.
        </ng-template>
      </p>
      <ng-template #noDefault>
        <p class="fl-no-margin-top fl-no-margin-bottom" i18n>
          <ng-container *ngIf="servicesCount > 1; else noDefaultOneService">
            There are {{servicesCount}} services with this product. This will add the configurable options to the
            {{servicesCount}} services with empty value and no cost. Optionally, you can edit the configurable option and
            set default value prior to adding it to the product.
          </ng-container>
          <ng-template #noDefaultOneService>
            There is 1 service with this product. This will add the configurable options to the service with empty
            value and no cost. Optionally, you can edit the configurable option and set default value prior to adding
            it to the product.
          </ng-template>
        </p>
      </ng-template>
    </ng-container>
  </ng-template>
</app-common-dialog>
