<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="editTicketForm" *ngIf="createOptions">
  <app-form-errors #formErrors [formGroup]="editTicketForm"></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]="editTicketForm.controls.client"></app-client-autocomplete>
      <app-icon class="fl-margin-top" [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
            [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-hint *ngIf="toRecipientsHint">{{toRecipientsHint}}</mat-hint>
      </mat-form-field>
      <app-icon class="fl-margin-top" [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:
        <ng-container *ngIf="toRecipients && toRecipients.value && toRecipients.value.length; else loadFromTicket">
          <span *ngFor="let recipient of toRecipients.value; let last=last;">
            {{getRecipientDisplay(recipient)}}<span *ngIf="!last">,</span>
          </span>
        </ng-container>
        <ng-template #loadFromTicket>
          <span>{{object.to_recipients_display}}</span>
        </ng-template>
      </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]="editTicketForm.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]="editTicketForm.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" (onKeyDown)="handleTinyKeyDown($event)"
              formControlName="description" [licenseKey]="'gpl'"></editor>
    </div>
  </div>
</form>
