<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)" class="fl-content"
      *ngIf="createOptions" [formGroup]="configurableOptionForm" layoutDirection="column">
  <app-form-errors #formErrors [formGroup]="configurableOptionForm"></app-form-errors>
  <div layoutDirection="row" appLayoutGap="10px">
    <mat-form-field appFlex="50">
      <mat-label i18n>Option display</mat-label>
      <input matInput placeholder="Option display" i18n-placeholder type="text" formControlName="display_name" required>
      <mat-error>{{fieldErrors['display_name']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="50" subscriptSizing="dynamic">
      <mat-label i18n>Internal name</mat-label>
      <input matInput placeholder="Internal name" i18n-placeholder type="text" formControlName="name" required>
      <mat-error>{{fieldErrors['name']}}</mat-error>
    </mat-form-field>
  </div>
  <mat-form-field>
    <mat-label i18n>Help text</mat-label>
    <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
              matInput formControlName="help_text"></textarea>
    <mat-error>{{fieldErrors['help_text']}}</mat-error>
  </mat-form-field>

  <p class="fl-no-margin-top fl-margin-bottom" i18n>
    Public configurable options are required fields that users must fill in the order form.
    Depending on your requirements, you can add a choice for "No" or "0" with zero cycle price.
    Optionally, specify a "Default value" that will be pre-filled in the order form.
  </p>

  <div layoutDirection="row" appLayoutGap="10px" xsGap="0" layoutDirection-lt-sm="column">
    <mat-form-field appFlex="auto">
      <mat-label i18n>Billing type</mat-label>
      <mat-select formControlName="billing_type" placeholder="Billing type" i18n-placeholder required>
        <mat-option *ngFor="let billingType of createOptions.billing_type_choices" [value]="billingType[0]">
          {{billingType[1]}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['billing_type']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="auto">
      <mat-label i18n>Status</mat-label>
      <mat-select formControlName="status" placeholder="Status" i18n-placeholder required>
        <mat-option *ngFor="let status of createOptions.status_choices" [value]="status[0]">
          {{status[1]}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['status']}}</mat-error>
    </mat-form-field>
  </div>
  <div layoutDirection="row" appLayoutGap="10px" xsGap="0" layoutDirection-lt-sm="column">
    <mat-form-field appFlex="auto">
      <mat-label i18n>Display widget</mat-label>
      <mat-select formControlName="widget" placeholder="Display widget" i18n-placeholder required>
        <mat-option *ngFor="let widget of createOptions.widgets" [value]="widget.value">
          {{widget.label}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['widget']}}</mat-error>
    </mat-form-field>
    <mat-form-field appFlex="auto" *ngIf="configurableOptionForm.controls.widget.value !== 'num_in'; else numeric">
      <mat-label i18n>Default value</mat-label>
      <mat-select formControlName="default_value" placeholder="Default value" i18n-placeholder>
        <ng-container *ngIf="configurableOptionForm.controls.widget.value === 'yesno'; else withChoices">
          <mat-option [value]="'yes'" i18n>Yes</mat-option>
          <mat-option [value]="'no'" i18n>No</mat-option>
        </ng-container>
        <ng-template #withChoices>
          <mat-option [value]="''"></mat-option>
          <mat-option *ngFor="let choice of choices" [value]="choice.choice">
            {{choice.label}}
          </mat-option>
        </ng-template>
      </mat-select>
      <mat-error>{{fieldErrors['default_value']}}</mat-error>
    </mat-form-field>
    <ng-template #numeric>
      <mat-form-field appFlex="auto">
        <mat-label i18n>Default value</mat-label>
        <input matInput type="number" formControlName="default_value" placeholder="Default value">
        <mat-error>{{fieldErrors['default_value']}}</mat-error>
      </mat-form-field>
    </ng-template>
  </div>
  <div *ngIf="settingsOptions.hasOwnProperty(formWidget.value)" layoutDirection="column">
    <h3 class="fl-detail fl-margin-bottom-medium" i18n>Widget settings</h3>
    <mat-form-field *ngFor="let setting of settingsOptions[formWidget.value] | keyvalue">
      <mat-label>{{setting.value.display}}</mat-label>
      <input matInput [placeholder]="setting.value.display" [type]="setting.value.type" [formControlName]="setting.key">
      <mat-error>{{fieldErrors[setting.key] || fieldErrors['settings']}}</mat-error>
    </mat-form-field>
  </div>

  <ng-container *ngIf="!this.configurableOptionForm.controls.widget.dirty; else widgetDirty">
    <div *ngIf="hasChoices" class="full-width">
      <h3 i18n>Choices</h3>
      <hr/>
    </div>
    <div *ngFor="let choice of choices; let last=last">
      <div *ngIf="hasChoices" class="full-width fl-margin-top" layoutDirection="row" layoutAlign="default center">
        <div class="fl-margin-top-small">
          <span class="fl-bold">{{choice.label}}</span> ({{choice.choice}}):
        </div>
        <div>
          <app-object-actions [objectActions]="choiceActions[choice.id]" [maxVisibleActions]="4">
          </app-object-actions>
        </div>
      </div>
      <table *ngIf="object && object.cycles" class="full-width" mat-table [dataSource]="choice.cycles">
        <ng-container matColumnDef="display_name">
          <th mat-header-cell *matHeaderCellDef i18n>Cycle</th>
          <td mat-cell *matCellDef="let cycle">
            {{cycle.display_name}}
          </td>
        </ng-container>
        <ng-container matColumnDef="price">
          <th mat-header-cell *matHeaderCellDef i18n>Price</th>
          <td mat-cell *matCellDef="let cycle">
            <span *ngIf="cycle.price_type === 'fixed'">{{cycle.price | currencyFormatter: cycle.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</span>
            <span *ngIf="cycle.price_type === 'percentage'" i18n>{{cycle.price}}%</span>
          </td>
        </ng-container>
        <ng-container matColumnDef="setup_fee">
          <th mat-header-cell *matHeaderCellDef i18n>Setup fee</th>
          <td mat-cell *matCellDef="let cycle">
            {{cycle.setup_fee | currencyFormatter: cycle.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
          </td>
        </ng-container>
        <ng-container matColumnDef="(actions)">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let cycle">
            <app-object-actions [objectActions]="cycleActions[choice.id + '_' + cycle.id]" [maxVisibleActions]="2">
            </app-object-actions>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="['display_name', 'price', 'setup_fee', '(actions)']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['display_name', 'price', 'setup_fee', '(actions)'];"></tr>
      </table>

      <div *ngIf="object.id" class="fl-margin-top fl-margin-bottom">
        <a mat-button color="primary" (click)="addCycle(choice)">
          <span *ngIf="configurableOptionForm.controls.billing_type.value === 'recurring'; else addPrice" i18n>Add cycle</span>
          <ng-template #addPrice>
            <span i18n>Add price</span>
          </ng-template>
        </a>
      </div>
      <mat-divider *ngIf="!last"></mat-divider>
    </div>

    <div *ngIf="hasChoices" class="fl-margin-top">
      <a mat-button mat-raised-button color="primary" (click)="addChoice()" i18n>Add choice</a>
    </div>
  </ng-container>
  <ng-template #widgetDirty>
    <p class="fl-detail" i18n>Display widget changed, please save to continue.</p>
  </ng-template>
</form>
