<ng-container *ngIf="option">
  <div *ngIf="option.widget === 'drop'" class="position-relative fl-margin-top">
    <mat-form-field [class.mat-form-field-invalid]="!!error">
      <mat-label>{{option.display_name}}</mat-label>
      <mat-select [placeholder]="option.display_name" [value]="value" (valueChange)="emitValueChange($event)" required>
        <mat-option *ngFor="let choice of option.choices" [value]="choice.choice">
          <ng-container *ngIf="choice.cycle.price_type === 'fixed'">
            {{choice.label}} ({{choice.cycle.price | currencyFormatter: choice.cycle.currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}})
          </ng-container>
          <ng-container *ngIf="choice.cycle.price_type === 'percentage'"
                        i18n>{{choice.label}} ({{choice.cycle.price}}%)</ng-container>
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-error class="conf-opt-input-error">{{error}}</mat-error>
  </div>
  <div *ngIf="option.widget === 'yesno'" class="position-relative fl-margin-top fl-margin-bottom-medium">
    <mat-checkbox color="primary" [checked]="value === 'yes'"
                  (change)="emitValueChange($event.checked ? 'yes' : 'no')">
      <ng-container *ngIf="option.cycle.price_type === 'fixed'">
        {{option.display_name}} ({{option.cycle.price | currencyFormatter: option.cycle.currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}})
      </ng-container>
      <ng-container *ngIf="option.cycle.price_type === 'percentage'"
                    i18n>{{option.display_name}} ({{option.cycle.price}}%)</ng-container>
    </mat-checkbox>
    <mat-error class="conf-opt-input-error">{{error}}</mat-error>
  </div>
  <div *ngIf="option.widget === 'radio'" class="position-relative fl-margin-top">
    <p>{{option.display_name}}</p>
    <mat-radio-group layoutDirection="column" appLayoutGap="5px" [value]="value"
                     (change)="emitValueChange($event.value)">
      <mat-radio-button *ngFor="let choice of option.choices" [value]="choice.choice" color="primary">
        <ng-container *ngIf="choice.cycle.price_type === 'fixed'">
          {{choice.label}} ({{choice.cycle.price | currencyFormatter: choice.cycle.currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}})
        </ng-container>
        <ng-container *ngIf="choice.cycle.price_type === 'percentage'"
                      i18n>{{choice.label}} ({{choice.cycle.price}}%)
        </ng-container>
      </mat-radio-button>
    </mat-radio-group>
    <mat-error class="conf-opt-radio-error">{{error}}</mat-error>
  </div>
  <div *ngIf="option.widget === 'num_in'" class="position-relative fl-margin-top">
    <mat-form-field [class.mat-form-field-invalid]="!!error">
      <mat-label>{{option.display_name}}</mat-label>
      <input matInput type="number" [placeholder]="option.display_name" [value]="value"
             (change)="emitValueChange($event.target.value)" (keyup)="emitValueChange($event.target.value)" required>
    </mat-form-field>
    <mat-error class="conf-opt-input-error">{{error}}</mat-error>
  </div>
  <p class="break-spaces fl-gray-color fl-margin-bottom" *ngIf="option.help_text"
     [class.option-help-text]="!error">{{option.help_text}}</p>
</ng-container>
