<ng-container *ngIf="orderOptions">
  <div layoutDirection="row" layoutAlign="center center" class="object-details-card">
    <mat-card appearance="raised" class="fl-card-fixed-md">
      <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
      <mat-card-header>
        <mat-card-title>
          {{orderOptions.name}}
        </mat-card-title>
        <mat-card-subtitle class="break-spaces">{{orderOptions.description}}</mat-card-subtitle>
      </mat-card-header>
      <mat-divider></mat-divider>
      <div class="fl-margin-top-small fl-margin-right-small fl-margin-left-small">
        <app-form-errors #formErrors [formGroup]="orderForm"></app-form-errors>
      </div>
      <mat-card-content class="fl-content fl-margin-top">
        <form [formGroup]="orderForm" (ngSubmit)="saveToCart()">
          <mat-form-field class="full-width">
            <mat-label i18n>Payment cycle selection</mat-label>
            <mat-select placeholder="Payment cycle selection" i18n-placeholder
                        [(ngModel)]="selectedCycle"
                        [ngModelOptions]="{standalone: true}"
                        (ngModelChange)="productCycleChanged($event)">
              <mat-option *ngFor="let cycle of orderOptions.cycles" [value]="cycle.id" class="cycle-select-option">
                <div class="fl-bold">{{cycle.display_name}} ({{cycle.fixed_price | currencyFormatter: cycle.currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}})</div>
                <br>
                <div class="mat-caption" i18n> setup fee: {{cycle.setup_fee | currencyFormatter: cycle.currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale}}</div>
              </mat-option>
            </mat-select>
          </mat-form-field>
          <ng-container *ngIf="orderOptions.configurable_options.length">
            <div *ngFor="let configOpt of orderOptions.configurable_options">
              <app-configurable-option-input
                [option]="configOpt"
                [(value)]="configOptionValues[configOpt.id]"
                (valueChange)="optionsChanged = true"
                [error]="backendErrors[configOpt.id]"></app-configurable-option-input>
            </div>
          </ng-container>

          <app-plugin-ui #pluginComponent *ngIf="orderOptions && orderOptions.has_plugin"
                         [pluginName]="orderOptions.plugin_label" [panelName]="'enduser'" componentName="OrderProduct"
                         [componentData]="pluginData">
          </app-plugin-ui>
        </form>
      </mat-card-content>
      <mat-card-actions layoutDirection="column" layoutAlign="start center">
        <button mat-button mat-raised-button color="primary" (click)="saveToCart()" i18n>
          Save to cart
        </button>
      </mat-card-actions>
    </mat-card>
  </div>
</ng-container>
