<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="invoiceForm" *ngIf="createOptions">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="invoiceForm"></app-form-errors>
  <div layoutDirection="column">
    <h2 class="fl-heading-md" i18n>Select client</h2>
    <app-client-autocomplete [control]="invoiceForm.controls.client"></app-client-autocomplete>
    <mat-form-field>
      <mat-label i18n>Status</mat-label>
      <mat-select formControlName="status" placeholder="Status" i18n-placeholder>
        <mat-option *ngFor="let status of createOptions.invoice_statuses" [value]="status[0]">
          {{status[1]}}
        </mat-option>
      </mat-select>
      <mat-error i18n>{{ invoiceForm.controls.status.errors | errorFormatter }}</mat-error>
    </mat-form-field>
    <div layoutDirection="row" appFlex="100" appLayoutGap="5px">
      <mat-form-field appFlex="50">
        <mat-label i18n>Issue date</mat-label>
        <input matInput [matDatepicker]="issueDatePicker"
               formControlName="issue_date" placeholder="Issue date" i18n-placeholder>
        <mat-datepicker-toggle matSuffix [for]="issueDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #issueDatePicker></mat-datepicker>
        <mat-error i18n>This field is required!</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="50">
        <mat-label i18n>Due date</mat-label>
        <input matInput [matDatepicker]="dueDatePicker"
               formControlName="due_date" placeholder="Due date" i18n-placeholder>
        <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #dueDatePicker></mat-datepicker>
        <mat-error i18n>This field is required!</mat-error>
      </mat-form-field>
    </div>
    <div layoutDirection="row" appFlex="100" appLayoutGap="5px"
         *ngIf="invoiceForm.contains('fiscal_date') && invoiceForm.contains('fiscal_due_date')">
      <mat-form-field appFlex="50">
        <mat-label i18n>Fiscal date</mat-label>
        <input matInput [matDatepicker]="fiscalDatePicker"
               formControlName="fiscal_date" placeholder="Fiscal date" i18n-placeholder>
        <mat-datepicker-toggle matSuffix [for]="fiscalDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #fiscalDatePicker></mat-datepicker>
        <mat-error i18n>{{ invoiceForm.controls.fiscal_date.errors | errorFormatter }}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="50">
        <mat-label i18n>Fiscal due date</mat-label>
        <input matInput [matDatepicker]="fiscalDueDatePicker"
               formControlName="fiscal_due_date" placeholder="Fiscal due date" i18n-placeholder>
        <mat-datepicker-toggle matSuffix [for]="fiscalDueDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #fiscalDueDatePicker></mat-datepicker>
        <mat-error i18n>{{ invoiceForm.controls.fiscal_due_date.errors | errorFormatter }}</mat-error>
      </mat-form-field>
    </div>
    <div class="fl-margin-bottom-medium" layoutDirection="row" layoutAlign="default center" appLayoutGap="10px">
      <div>
        <h2 class="fl-heading-md" i18n>Invoice items</h2>
      </div>
      <button mat-mini-fab class="add-item-button"
              [attr.fl-tooltip]="addInvoiceItemTooltip" fl-tooltip-direction="right"
              [disabled]="!this.invoiceForm.controls.client.value"
              (click)="addInvoiceItem($event)">
        <mat-icon>add</mat-icon>
      </button>
    </div>
    <div formArrayName="items" *ngFor="let item of invoiceForm.get('items')['controls']; let i = index; let last = last;"
         [class.inv-item-row]="!last">
      <div [formGroupName]="i">
        <mat-form-field class="full-width">
          <mat-label i18n>Description</mat-label>
          <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                    matInput rows="3" maxlength="1024" placeholder="Description" i18n-placeholder type="text"
                    formControlName="description" required>
          </textarea>
          <mat-error>{{invoiceForm.get('items')['controls'][i].get('description').errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <div layoutDirection="row" layoutDirection-lt-sm="column" appLayoutGap="10px" xsGap="0">
          <mat-form-field appFlex="50">
            <mat-label i18n>Item type</mat-label>
            <mat-select formControlName="item_type" placeholder="Item type" i18n-placeholder>
              <mat-option *ngFor="let item_type of createOptions.invoice_item_types | keyvalue"
                          [class.hide]="nonSelectableItemTypes.includes(item_type.key)"
                          [value]="item_type.key">
                {{item_type.value}}
              </mat-option>
            </mat-select>
            <mat-error i18n>This field is required!</mat-error>
          </mat-form-field>
          <mat-form-field appFlex="50">
            <mat-label i18n>Amount ({{object.currency || invoiceForm.controls.client.value.currency}})</mat-label>
            <input matInput placeholder="Amount" i18n-placeholder type="number"
                   formControlName="amount" required>
            <mat-error>{{invoiceForm.get('items')['controls'][i].get('amount').errors | errorFormatter}}</mat-error>
          </mat-form-field>
        </div>
        <div *ngIf="invoiceForm.get('items')['controls'][i].get('item_type').value === 'service'"
             layoutDirection="row" layoutDirection-lt-sm="column" appLayoutGap="10px" xsGap="0">
          <mat-form-field appFlex="50">
            <mat-label i18n>Service</mat-label>
            <mat-select formControlName="service" placeholder="Service" i18n-placeholder>
              <mat-option *ngFor="let service of createOptions.services"
                          [value]="service.id">
                {{service.display_name}}
              </mat-option>
            </mat-select>
            <mat-error i18n>This field is required!</mat-error>
          </mat-form-field>
          <mat-form-field appFlex="50">
            <mat-label i18n>Service cycle</mat-label>
            <mat-select formControlName="service_cycle" placeholder="Service cycle" i18n-placeholder>
              <mat-option i18n>(none)</mat-option>
              <mat-option *ngFor="let serviceCycle of serviceCycles.get(item)" [value]="serviceCycle.id" i18n>
                {{serviceCycle.id}} (<app-date-displayer [date]="serviceCycle.start_dt" withTime></app-date-displayer> - <app-date-displayer [date]="serviceCycle.end_dt" withTime></app-date-displayer>)
              </mat-option>
            </mat-select>
            <mat-error>{{invoiceForm.get('items')['controls'][i].get('service_cycle').errors | errorFormatter}}</mat-error>
          </mat-form-field>
        </div>
        <mat-checkbox formControlName="taxed" color="primary" i18n>
          Taxed
        </mat-checkbox>
        <div class="fl-margin-bottom fl-margin-top">
          <button mat-button (click)="removeItem(i)" i18n>Delete invoice item</button>
        </div>
      </div>
    </div>
  </div>
</form>
