<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="serviceCycleForm" layoutDirection="column" class="fl-content">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="serviceCycleForm"></app-form-errors>
  <mat-form-field>
    <mat-label i18n>State</mat-label>
    <mat-select formControlName="state" placeholder="State" i18n-placeholder required>
      <mat-option [value]="ServiceCycleStates.Invoiced" i18n>Invoiced</mat-option>
      <mat-option [value]="ServiceCycleStates.Unpaid" i18n>Unpaid</mat-option>
      <mat-option [value]="ServiceCycleStates.Paid" i18n>Paid</mat-option>
      <mat-option [value]="ServiceCycleStates.Refunded" i18n>Refunded</mat-option>
      <mat-option [value]="ServiceCycleStates.PaymentCanceled" i18n>Payment canceled</mat-option>
      <ng-container *ngIf="object.billing_type === ServiceCycleBillingTypes.PostPaid">
        <mat-option [value]="ServiceCycleStates.InProgress" i18n>In progress</mat-option>
      </ng-container>
      <mat-error>{{ fieldErrors['state']}}</mat-error>
    </mat-select>
  </mat-form-field>

  <div layoutDirection="row" appLayoutGap="5px" class="fl-margin-bottom-small">
    <mat-form-field appFlex="100">
      <mat-label i18n>Start</mat-label>
      <input matInput [matDatepicker]="startDtPicker" placeholder="Start" i18n-placeholder
             formControlName="start_dt">
      <mat-datepicker-toggle matSuffix [for]="startDtPicker"></mat-datepicker-toggle>
      <mat-datepicker #startDtPicker></mat-datepicker>
      <mat-error>{{ fieldErrors['start_dt']}}</mat-error>
    </mat-form-field>
  </div>
  <div layoutDirection="row" appLayoutGap="5px">
    <mat-form-field appFlex="100">
      <mat-label i18n>End</mat-label>
      <input matInput [matDatepicker]="endDtPicker" placeholder="End" i18n-placeholder
             formControlName="end_dt">
      <mat-datepicker-toggle matSuffix [for]="endDtPicker"></mat-datepicker-toggle>
      <mat-datepicker #endDtPicker></mat-datepicker>
      <mat-error>{{ fieldErrors['end_dt']}}</mat-error>
    </mat-form-field>
  </div>
  <mat-form-field>
    <mat-label i18n>Price ({{object.currency | nullValue}})</mat-label>
    <input matInput formControlName="price" placeholder="Price ({{object.currency | nullValue}})" i18n-placeholder
           type="number">
    <mat-error>{{ fieldErrors['price']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>Standard price ({{object.currency | nullValue}})</mat-label>
    <input matInput formControlName="standard_price" placeholder="Standard price ({{object.currency | nullValue}})"
           i18n-placeholder type="number">
    <mat-error>{{ fieldErrors['standard_price']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>Fixed price ({{object.currency | nullValue}})</mat-label>
    <input matInput formControlName="fixed_price" placeholder="Fixed price ({{object.currency | nullValue}})"
           i18n-placeholder type="number">
    <mat-error>{{ fieldErrors['fixed_price']}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>Dynamic price ({{object.currency | nullValue}})</mat-label>
    <input matInput formControlName="dynamic_price" placeholder="Dynamic price ({{object.currency | nullValue}})"
           i18n-placeholder type="number">
    <mat-error>{{ fieldErrors['dynamic_price']}}</mat-error>
  </mat-form-field>
  <mat-checkbox formControlName="price_override" i18n>Override price</mat-checkbox>
  <mat-form-field>
    <mat-label i18n>Price override model</mat-label>
    <mat-select formControlName="price_override_model" placeholder="Price override model" i18n-placeholder required>
      <mat-option [value]="'discount-value'" i18n>Discount value</mat-option>
      <mat-option [value]="'override-value'" i18n>Override value</mat-option>
      <mat-option [value]="'discount-percent'" i18n>Discount percent</mat-option>
      <mat-option [value]="'free-service'" i18n>Free service</mat-option>
    </mat-select>
  </mat-form-field>
</form>
