<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="openTicketForm" *ngIf="createOptions" class="fl-content">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="openTicketForm"></app-form-errors>
  <div layoutDirection="column">
    <mat-form-field appFlex="100">
      <mat-label i18n>Title</mat-label>
      <input matInput placeholder="Title" i18n-placeholder type="text" formControlName="title" required>
      <mat-error>{{fieldErrors['title']}}</mat-error>
    </mat-form-field>

    <app-autocomplete [control]="openTicketForm.controls.department"
                      [placeholderSelected]="departmentSelectedPlaceholder"
                      [placeholderUnselected]="departmentUnselectedPlaceholder"
                      [optionsService]="ticketDepartmentsApiService"></app-autocomplete>

  </div>
  <div layoutDirection="column">
    <app-client-autocomplete [control]="openTicketForm.controls.client"></app-client-autocomplete>

    <ng-container *ngIf="openTicketForm.controls.client.value?.id">
      <p class="fl-no-margin-top" i18n *ngIf="toRecipients && toRecipients.length">
        The following user(s) are automatically emailed on ticket open and ticket replies:
        <span *ngFor="let recipient of toRecipients; let last=last;">
          {{getRecipientDisplay(recipient)}}<span *ngIf="!last">,</span>
        </span>
      </p>
    </ng-container>

    <mat-form-field>
      <mat-label i18n>CC recipients</mat-label>
      <mat-chip-grid formControlName="cc_recipients" #ccRecipientChipsList>
        <ng-container *ngIf="ccRecipients.value">
          <mat-chip-row *ngFor="let recipient of ccRecipients.value" [value]="recipient"
            (removed)="removeRecipient(recipient, ccRecipients)">
            <div layoutDirection="column">
              <span>
                {{getRecipientDisplay(recipient)}}
              </span>
            </div>
            <button matChipRemove>
              <mat-icon>cancel</mat-icon>
            </button>
          </mat-chip-row>
        </ng-container>
        <input
          placeholder="Add CC recipient..." i18n-placeholder
          formControlName="cc_recipients_input"
          #ccChipInput
          [matChipInputFor]="ccRecipientChipsList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          (focusout)="addRecipientOnFocusOut(ccChipInput, ccRecipients)"
          (matChipInputTokenEnd)="addCustomCCRecipient($event)">
      </mat-chip-grid>
      <mat-error>{{fieldErrors['cc_recipients']}}</mat-error>
    </mat-form-field>

    <app-autocomplete [control]="openTicketForm.controls.service"
                      [placeholderUnselected]="serviceUnselectedPlaceholder"
                      [placeholderSelected]="serviceSelectedPlaceholder"
                      [optionsService]="servicesApiService"></app-autocomplete>

  </div>
  <div layoutDirection="column">
    <h2 class="fl-heading-md" i18n>Description</h2>
    <div class="fl-tinymce-placeholder">
      <editor #tinyMceArea [init]="tinyMCEOptions" (onKeyDown)="handleTinyKeyDown($event)" [licenseKey]="'gpl'"
              formControlName="description"></editor>
    </div>
    <mat-error>{{fieldErrors['description']}}</mat-error>
  </div>
  <div layoutDirection="column">
    <p class="fl-heading-md fl-no-margin-bottom" i18n>Add attachments</p>
    <app-upload-interface [maxSize]="createOptions.MAX_TICKET_ATTACHMENT_SIZE"
                          [multipleFileSelectors]="true" #uploadInterface></app-upload-interface>
  </div>
</form>
