<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form appFormSubmit (ngSubmit)="addCycle()" [formGroup]="editCycleForm" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="editCycleForm"></app-form-errors>
      <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px"
           [class.hide]="data.option.billing_type === 'onetime'">
        <mat-form-field appFlex="50">
          <mat-label i18n>Cycle</mat-label>
          <mat-select formControlName="cycle" placeholder="Cycle" i18n-placeholder required>
            <mat-option [class.hide]="cycle[0] === 'onetime'" *ngFor="let cycle of data.createOptions.cycles" [value]="cycle[0]">
              {{cycle[1]}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Cycle multiplier</mat-label>
          <input matInput type="number" formControlName="cycle_multiplier" placeholder="Cycle multiplier"
                 i18n-placeholder>
        </mat-form-field>
      </div>
      <mat-form-field>
        <mat-label i18n>Currency</mat-label>
        <mat-select formControlName="currency" placeholder="Currency" i18n-placeholder required>
          <mat-option *ngFor="let currency of data.createOptions.currencies" [value]="currency.code">
            {{currency.code}} <span *ngIf="currency.is_default" i18n>(default)</span>
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-checkbox formControlName="is_relative_price" color="primary" i18n>
        Auto calculate prices
      </mat-checkbox>
      <div *ngIf="!editCycleForm.controls.is_relative_price.value"
           layoutDirection="column">
        <mat-radio-group aria-labelledby="Price type" i18n-aria-labelledby layoutDirection="column"
                         formControlName="price_type" class="fl-margin-top-small fl-margin-bottom-small">
          <mat-radio-button color="primary" value="fixed" i18n>Fixed price</mat-radio-button>
          <mat-radio-button color="primary" value="percentage"
                            class="fl-margin-top" i18n>Percentage of product price</mat-radio-button>
        </mat-radio-group>
        <mat-form-field appFlex="50" *ngIf="editCycleForm.controls.price_type.value === 'fixed'">
          <mat-label i18n>Fixed price</mat-label>
          <input matInput type="number" formControlName="price" placeholder="Fixed price" i18n-placeholder>
          <mat-error>{{backendErrors['price']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50" *ngIf="editCycleForm.controls.price_type.value === 'percentage'">
          <mat-label i18n>Percentage of product price</mat-label>
          <input matInput type="number" formControlName="price"
                 placeholder="Percentage of product price" i18n-placeholder>
          <mat-error>{{backendErrors['price']}}</mat-error>
        </mat-form-field>
        <mat-checkbox formControlName="percentage_relative_to_options"
                      class="pull-checkbox-up"
                      *ngIf="editCycleForm.controls.price_type.value === 'percentage'"
                      color="primary" i18n>Apply percentage to other configurable options price</mat-checkbox>
        <mat-form-field appFlex="50">
          <mat-label i18n>Setup fee</mat-label>
          <input matInput type="number" formControlName="setup_fee" placeholder="Setup fee" i18n-placeholder>
          <mat-error>{{backendErrors['setup_fee']}}</mat-error>
        </mat-form-field>
      </div>
    </form>
  </ng-template>
</app-common-dialog>
