<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="openTicketForm" *ngIf="createOptions">
  <!--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>

    <div layoutDirection="row">
      <app-client-autocomplete appFlex="95" [control]="openTicketForm.controls.client"></app-client-autocomplete>
      <app-icon class="fl-margin-top fl-margin-left-small" [icon]="clientInfoIcon"></app-icon>
    </div>

    <div *ngIf="!clientWithRecipientsSelected; else hasClientSelected">
      <mat-form-field appFlex="95">
        <mat-label i18n>To recipients</mat-label>
        <mat-chip-grid formControlName="to_recipients" #toRecipientChipsList>
          <ng-container *ngIf="toRecipients.value">
            <mat-chip-row *ngFor="let recipient of toRecipients.value" [value]="recipient"
              (removed)="removeRecipient(recipient, toRecipients)">
              <div layoutDirection="column">
                <span>
                  {{getRecipientDisplay(recipient)}}
                </span>
              </div>
              <button matChipRemove>
                <mat-icon>cancel</mat-icon>
              </button>
            </mat-chip-row>
          </ng-container>
          <input
            placeholder="Add recipient ..." i18n-placeholder
            formControlName="to_recipients_input"
            #toChipInput
            #toTrigger="matAutocompleteTrigger"
            [matAutocomplete]="toAutoComplete"
            [matChipInputFor]="toRecipientChipsList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (focusout)="addRecipientOnFocusOut(toChipInput, toRecipients)"
            (matChipInputTokenEnd)="addCustomToRecipient($event)">
        </mat-chip-grid>
        <mat-autocomplete #toAutoComplete="matAutocomplete" (optionSelected)="toRecipientSelected($event)" autoActiveFirstOption>
          <mat-option *ngFor="let recipient of filteredToRecipients$ | async" [value]="recipient">
            {{recipient.display}}
          </mat-option>
        </mat-autocomplete>
        <mat-error>{{fieldErrors['to_recipients']}}</mat-error>
      </mat-form-field>
      <app-icon class="fl-margin-top fl-margin-left-small" [icon]="toRecipientsInfoIcon"></app-icon>
    </div>

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

    <div>
      <mat-form-field appFlex="95">
        <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
            [matAutocomplete]="ccAutoComplete"
            [matChipInputFor]="ccRecipientChipsList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (focusout)="addRecipientOnFocusOut(ccChipInput, ccRecipients, true)"
            (matChipInputTokenEnd)="addCustomCCRecipient($event)">
        </mat-chip-grid>
        <mat-autocomplete #ccAutoComplete="matAutocomplete" (optionSelected)="ccRecipientSelected($event)" autoActiveFirstOption>
          <mat-option *ngFor="let recipient of filteredCCRecipients$ | async" [value]="recipient">
            {{recipient.display}}
          </mat-option>
        </mat-autocomplete>
        <mat-error>{{fieldErrors['cc_recipients']}}</mat-error>
      </mat-form-field>
      <app-icon class="fl-margin-top fl-margin-left-small" [icon]="ccRecipientsInfoIcon"></app-icon>
    </div>

    <mat-form-field appFlex="100">
      <mat-label i18n>Priority</mat-label>
      <mat-select formControlName="priority" placeholder="Priority" i18n-placeholder required>
        <mat-option *ngFor="let priorityKey of prioritiesKeys" [value]="priorityKey">
          {{createOptions.priorities[priorityKey]}}
        </mat-option>
      </mat-select>
    </mat-form-field>

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

  </div>
  <div layoutDirection="row" appLayoutGap="10px">
    <mat-form-field appFlex="100">
      <mat-label i18n>Status</mat-label>
      <mat-select formControlName="status" placeholder="Status" i18n-placeholder required>
        <mat-option *ngFor="let statusKey of statusesKeys" [value]="statusKey">
          {{createOptions.statuses[statusKey]}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div layoutDirection="column">
    <app-user-autocomplete [control]="openTicketForm.controls.assigned_to"
                           [overridePlaceholderSelected]="assignedToSelectedPlaceholder"
                           [overridePlaceholderUnselected]="assignedToUnselectedPlaceholder"
                           staffUsersOnly></app-user-autocomplete>
  </div>
  <div layoutDirection="column">
    <h2 class="fl-heading-md" i18n>Description</h2>
    <div class="fl-tinymce-placeholder">
      <editor #tinyMceArea [init]="tinyMCEOptions" [licenseKey]="'gpl'"
              (onKeyDown)="handleTinyKeyDown($event)" formControlName="description"></editor>
    </div>
    <mat-error>{{fieldErrors['description']}}</mat-error>
  </div>
  <a mat-flat-button class="fl-margin-top unset-text-capitalize" (click)="openInsertPredefinedReplyDialog()"
       *ngIf="authSvc.feature('ui.plugins.tickets.insert-predefined-replies')"
       i18n><mat-icon class="fl-margin-right-small">quickreply</mat-icon>Insert predefined reply</a>
  <app-upload-interface [maxSize]="createOptions.MAX_TICKET_ATTACHMENT_SIZE"
                        [multipleFileSelectors]="true" #uploadInterface></app-upload-interface>
</form>
