<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef" [skipInputFocus]="true">
  <ng-template #dialogContent>
    <p *ngIf="noMatchingCycle" i18n>
      Cannot edit option since it has no matching cycle using current service's product & cycle selection.
    </p>
    <form appFormSubmit (ngSubmit)="saveOption()" class="fl-margin-top-small" [class.hide]="noMatchingCycle"
          [formGroup]="serviceConfigurableOptionForm" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="serviceConfigurableOptionForm"></app-form-errors>
      <div *ngIf="percentageInPrevOptions" class="fl-red-color fl-margin-bottom-small">
        <span i18n>Service has configurable options that were calculated using percentages. Further changes in service
        configurable options may result in dynamically editing prices of those options already saved on the form.</span>
      </div>

      <p class="fl-no-margin-top fl-margin-bottom"
         i18n>Option: {{serviceConfigurableOptionForm.controls.option.value.display_name}}</p>

      <mat-form-field [class.hide]="optionValueHidden">
        <mat-label i18n>Option value</mat-label>
        <mat-select formControlName="option_value" placeholder="Option value" i18n-placeholder>
          <mat-option *ngIf="serviceConfigurableOptionForm.controls.option.value?.widget === 'drop' ||
                             serviceConfigurableOptionForm.controls.option.value?.widget === 'radio' " [value]="''"
                      i18n>None</mat-option>
          <mat-option *ngFor="let optionValue of optionValues" [value]="optionValue?.choice || optionValue">
            {{ optionValue?.label || optionValue }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field [class.hide]="quantityHidden">
        <mat-label i18n>Quantity</mat-label>
        <input matInput placeholder="Quantity" type="number" i18n-placeholder
               formControlName="quantity" required>
        <mat-error>{{backendErrors['quantity']}}</mat-error>
      </mat-form-field>
      <p [class.hide]="quantityHidden || (!unitPriceControl.value && unitPriceControl.value !== 0)" class="fl-no-margin-top"
         i18n>Unit price: {{unitPriceControl.value | currencyFormatter: data.service.currency.code: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}}</p>
      <p [class.hide]="!priceControl.value && priceControl.value !== 0" class="fl-no-margin-top"
         i18n>Price: {{priceControl.value | currencyFormatter: data.service.currency.code: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}}</p>
      <p [class.hide]="!setupFeeControl.value && setupFeeControl.value !== 0" class="fl-no-margin-top"
         i18n>Setup fee: {{setupFeeControl.value | currencyFormatter: data.service.currency.code: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}}</p>
    </form>
  </ng-template>
</app-common-dialog>
