<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form appFormSubmit (ngSubmit)="saveCycle()"
          [formGroup]="productCycleForm" *ngIf="createOptions" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="productCycleForm"></app-form-errors>
      <div layoutDirection="row" appLayoutGap="10px" [class.hide]="data.product.billing_type === 'onetime'">
        <mat-form-field appFlex="50">
          <mat-label i18n>Cycle</mat-label>
          <mat-select formControlName="cycle" (selectionChange)="changedCycle()"
                      placeholder="Cycle" i18n-placeholder required>
            <ng-container *ngFor="let cycle of createOptions.cycles">
              <mat-option [class.hide]="cycle[0] === 'onetime'" [value]="cycle[0]">{{cycle[1]}}</mat-option>
            </ng-container>
          </mat-select>
          <mat-error>{{productCycleForm.controls.cycle.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50" *ngIf="productCycleForm.controls.cycle.value !== 'onetime'">
          <mat-label i18n>Cycle multiplier</mat-label>
          <input matInput placeholder="Cycle multiplier" i18n-placeholder type="number"
                 formControlName="cycle_multiplier" min="1" step="1" required>
          <mat-error>{{backendErrors['cycle_multiplier']}}</mat-error>
        </mat-form-field>
      </div>
      <mat-form-field appFlex="50">
        <mat-label i18n>Currency</mat-label>
        <mat-select formControlName="currency" (selectionChange)="changedCurrency()"
                    placeholder="Currency" i18n-placeholder required>
          <ng-container *ngFor="let currency of createOptions.currencies">
            <mat-option [value]="currency.code">{{currency.code}}</mat-option>
          </ng-container>
        </mat-select>
        <mat-error>{{productCycleForm.controls.currency.errors | errorFormatter}}</mat-error>
      </mat-form-field>
      <mat-checkbox formControlName="is_relative_price" color="primary"
                    *ngIf="data.product.price_model !== 'free'"
                    (change)="changedRelativePrice()" i18n>
        Auto calculate prices
      </mat-checkbox>
      <div layoutDirection="row" appLayoutGap="10px"
           *ngIf="productCycleForm.controls.is_relative_price.value === false && data.product.price_model !== 'free'">
        <mat-form-field appFlex="50" class="fl-margin-top-medium" subscriptSizing="dynamic">
          <mat-label>{{priceLabel}}</mat-label>
          <input matInput [placeholder]="priceLabel" type="number"
                 formControlName="fixed_price" min="0.00" step="0.01" required>
          <mat-error>{{productCycleForm.controls.fixed_price.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50" class="fl-margin-top-medium" subscriptSizing="dynamic"
                        *ngIf="productCycleForm.controls.cycle.value !== 'onetime'">
          <mat-label i18n>Setup fee</mat-label>
          <input matInput placeholder="Setup fee" i18n-placeholder type="number"
                 formControlName="setup_fee" min="0.00" step="0.01" required>
          <mat-error>{{productCycleForm.controls.setup_fee.errors | errorFormatter}}</mat-error>
        </mat-form-field>
      </div>
      <div *ngIf="productCycleForm.controls.is_relative_price.value === true" class="fl-detail">
        <span i18n>Prices will be calculated automatically</span>
      </div>
      <mat-form-field appFlex="50" [class.fl-margin-top]="data.product.price_model !== 'free'">
        <mat-label i18n>Status</mat-label>
        <mat-select formControlName="status"
                    placeholder="Status" i18n-placeholder required>
          <ng-container *ngFor="let status of createOptions.statuses">
            <mat-option [value]="status[0]">{{status[1]}}</mat-option>
          </ng-container>
        </mat-select>
        <mat-error>{{productCycleForm.controls.status.errors | errorFormatter}}</mat-error>
      </mat-form-field>
    </form>
  </ng-template>
</app-common-dialog>
