<div *ngIf="object" class="ticket-details fl-content">
  <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
  <div *ngIf="object.linked_tickets && object.linked_tickets.length" class="linked-tickets"
       layoutDirection="row" layoutAlign="start center">
    <p i18n>Linked tickets: </p>
    <ng-container *ngFor="let linkedTicketId of object.linked_tickets; let last=last">
      <a class="active-link vertical-align-middle" [routerLink]="getLinkedTicketRedirect(linkedTicketId)">
        {{linkedTicketId}}
      </a>
      <a class="vertical-align-middle" (click)="removeLinking(linkedTicketId)">
        <mat-icon class="fl-icons">delete</mat-icon>
      </a>
    </ng-container>
  </div>
  <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-assignee'); else noAssignee">
    <p i18n>
      Created by
      <a class="active-link" *ngIf="object && object.created_by && object.created_by.id"
         [routerLink]="[config.getPanelUrl('clients-users/users'), object.created_by.id]">
        {{object.created_by_display}}
      </a>
      <a class="active-link" *ngIf="!object.created_by && object.created_by_email"
         href="{{'mailto:' + object.created_by_email}}">
        {{object.created_by_display}}
      </a>
      on <app-date-displayer [date]="object.created_at" withTime></app-date-displayer>
    </p>
  </ng-container>
  <ng-template #noAssignee>
    <p i18n>
      Created on <app-date-displayer [date]="object.created_at" withTime></app-date-displayer>
    </p>
  </ng-template>
  <p *ngIf="object.status === 'merged' && object.merged_into" i18n>
    Merged into
    <a class="active-link"
       [routerLink]="[config.getPanelUrl('tickets'), object.merged_into]">
      #{{object.merged_into}}
    </a>
  </p>
  <p *ngIf="authSvc.feature('ui.plugins.tickets.show-assignee')" i18n>
    Assigned to
    <a *ngIf="object.assigned_to" class="active-link"
       [routerLink]="[config.getPanelUrl('clients-users/users'), object.assigned_to]">
      {{object.assigned_to_display}}
    </a>
    <a class="active-link" *ngIf="!object.assigned_to && object.assigned_to_email"
       href="{{'mailto:' + object.assigned_to_email}}">
      {{object.assigned_to_display}}
    </a>
    <span *ngIf="!object.assigned_to && !object.assigned_to_email">{{object.assigned_to_display}}</span>
  </p>
  <p *ngIf="object.department" i18n>
    <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.departament-link'); else noDepartamentLink">
      Department:
      <a [routerLink]="[config.getPanelUrl('tickets/departments'), object.department]"
         class="active-link">
        {{object.department_display}}
      </a>
    </ng-container>
    <ng-template #noDepartamentLink>
      Department: {{object.department_display}}
    </ng-template>
  </p>
  <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-client-link'); else noClientLink">
    <p i18n>Client:
      <a *ngIf="object.client"
         class="active-link" [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client]">
        {{object.client_display}}
      </a>
      <span *ngIf="!object.client">{{object.client_display}}</span>
    </p>
  </ng-container>
  <ng-template #noClientLink>
    <p i18n>Client: {{object.client_display}}</p>
  </ng-template>
  <p *ngIf="object.to_recipients_display" i18n>
    To recipients: {{object.to_recipients_display}}
  </p>
  <p *ngIf="object.cc_recipients" i18n>
    CC recipients: {{object.cc_recipients}}
  </p>
  <p *ngIf="object.service" i18n>
    Related service: <a [routerLink]="config.getPanelUrl('billing/services/' + object.service)"
                        class="active-link">
    {{object.service}}
  </a>
  </p>

  <p *ngIf="!object.description && object.main_attachments && object.main_attachments.length">
    <span i18n>Attachments:</span>
    <span *ngFor="let attachment of object.main_attachments">
      <button class="transparent-background attachments-menu-btn" mat-flat-button [disableRipple]="true"
              [matMenuTriggerFor]="ticketMenuAttachmentsWithoutDescription">
        <app-icon [icon]="attachmentIcon"></app-icon>
        <span class="active-link">{{attachment.file_name}}</span>
      </button>
      <mat-menu #ticketMenuAttachmentsWithoutDescription="matMenu">
        <button (click)="downloadAttachment(attachment.id)" mat-menu-item i18n>
          Download attachment
        </button>
        <button (click)="openAttachment(attachment.id)" mat-menu-item i18n>
          Open attachment
        </button>
        <button *ngIf="authSvc.feature('ui.plugins.tickets.show-remove-attachment')"
                (click)="removeAttachment(attachment.id, attachment.file_name)" mat-menu-item i18n>Remove attachment</button>
      </mat-menu>
  </span>
  </p>

  <div layoutDirection="row"
       *ngIf="object.description"
       [class.fl-flex-right-align]="object.is_staff_generated === true">
    <div class="ticket-message-owner-info" layoutDirection="column" appFlex="5">
      <div>
        <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
          <a *ngIf="object && object.created_by && object.created_by.id"
             [routerLink]="[config.getPanelUrl('clients-users/users'), object.created_by.id]">
            <app-gravatar
              [email]="object.ticket_owner_email"
              [imgTitle]="object.created_by_display + ' on ' + datePipe.toDateTime(object.created_at)"
              [customStyle]="{
                width: '35px',
                borderRadius: '100%',
                verticalAlign: 'middle'
              }">
            </app-gravatar>
          </a>
          <a *ngIf="!object.created_by && object.created_by_email"
             href="{{'mailto:' + object.created_by_email}}">
            <app-gravatar
              [email]="object.ticket_owner_email"
              [imgTitle]="object.created_by_display + ' on ' + datePipe.toDateTime(object.created_at)"
              [customStyle]="{
                width: '35px',
                borderRadius: '100%',
                verticalAlign: 'middle'
              }">
            </app-gravatar>
          </a>
        </ng-container>
        <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
          <app-gravatar *ngIf="object && !object.created_by && !object.created_by_email && object.is_staff_generated"
            [email]="object.department_email"
            [imgTitle]="object.created_by_display + ' on ' + datePipe.toDateTime(object.created_at)"
            [customStyle]="{
              width: '35px',
              borderRadius: '100%',
              verticalAlign: 'middle'
            }">
          </app-gravatar>
          <app-gravatar *ngIf="object && object.created_by && object.created_by.id"
            [email]="object.ticket_owner_email"
            [imgTitle]="object.created_by_display + ' on ' + datePipe.toDateTime(object.created_at)"
            [customStyle]="{
              width: '35px',
              borderRadius: '100%',
              verticalAlign: 'middle'
            }">
          </app-gravatar>
          <app-gravatar *ngIf="!object.created_by && object.created_by_email"
            [email]="object.ticket_owner_email"
            [imgTitle]="object.created_by_display + ' on ' + datePipe.toDateTime(object.created_at)"
            [customStyle]="{
              width: '35px',
              borderRadius: '100%',
              verticalAlign: 'middle'
            }">
          </app-gravatar>
        </ng-container>
      </div>
    </div>
    <div layoutDirection="column" appFlex="95">
      <div class="ticket-message"
           layoutDirection="column"
           (mouseover)="hoveredItems['mainMessage'] = true"
           (mouseleave)="hoveredItems['mainMessage'] = false"
           [class.foreign-ticket-message]="object.is_staff_generated === true">
        <div [hidden]="!hoveredItems['mainMessage']" class="ticket-message-actions">
          <button mat-icon-button [attr.fl-tooltip]="replyTooltip" fl-tooltip-direction="down"
                  (click)="replyToReply(object.description, object.created_by)">
            <mat-icon class="fl-icons">reply</mat-icon>
          </button>
        </div>
        <div class="ticket-message-timestamp">
          <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
            <a *ngIf="object && object.created_by && object.created_by.id"
               [routerLink]="[config.getPanelUrl('clients-users/users'), object.created_by.id]"
               class="active-link">
              {{object.created_by_display}}
            </a>
            <a *ngIf="!object.created_by && object.created_by_email"
               href="{{'mailto:' + object.created_by_email}}" class="active-link">
              {{object.created_by_display}}
            </a>
          </ng-container>
          <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
            <strong>
              {{object.created_by_display}}
            </strong>
          </ng-container>
          •
          <a class="timestamp-link"
             #replyLinks
             [id]="object.timestamp"
             [routerLink]="object.routerLink"
             [fragment]="object.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(object.timestamp, true, $event)"
             [attr.fl-tooltip]="object.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{object.timestamp_display}}
          </a>
        </div>
        <div *ngIf="object.description" [innerHTML]="ticketDescription">
        </div>
        <div *ngIf="object.main_attachments && object.main_attachments.length">
          <span i18n>Attachments:</span>
          <span *ngFor="let attachment of object.main_attachments">
            <button class="transparent-background attachments-menu-btn" mat-flat-button [disableRipple]="true"
                    [matMenuTriggerFor]="ticketMenuAttachments">
              <app-icon [icon]="attachmentIcon"></app-icon>
              <span class="active-link">{{attachment.file_name}}</span>
            </button>
            <mat-menu #ticketMenuAttachments="matMenu">
              <div>
                <button (click)="downloadAttachment(attachment.id)" mat-menu-item i18n>
                  Download attachment
                </button>
                <button (click)="openAttachment(attachment.id)" mat-menu-item i18n>
                  Open attachment
                </button>
                <button *ngIf="authSvc.feature('ui.plugins.tickets.show-remove-attachment')"
                        (click)="removeAttachment(attachment.id, attachment.file_name)" mat-menu-item i18n>Remove attachment</button>
              </div>
            </mat-menu>
          </span>
        </div>
        <div class="cma-container">
          <div class="chat-message-arrow">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div *ngFor="let item of object.replies_and_notes"
       layoutDirection="row"
       (mouseover)="hoveredItems[item.message_type + item.id] = true"
       (mouseleave)="hoveredItems[item.message_type + item.id] = false"
       [class.fl-flex-right-align]="item.is_staff_generated === true && !item.ticket_activity"
       [class.fl-margin-top-small]="!item.ticket_activity">
    <div *ngIf="item.ticket_activity === false" class="ticket-message-owner-info" layoutDirection="column" appFlex="5">
      <div>
        <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
          <a *ngIf="item.created_by && item.created_by.id"
             [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
            <app-gravatar
              [email]="item.message_owner_email"
              [imgTitle]="item.created_by_display + ' on ' + datePipe.toDateTime(item.created_at)"
              [customStyle]="{
                width: '35px',
                borderRadius: '100%',
                verticalAlign: 'middle'
              }">
            </app-gravatar>
          </a>
          <a *ngIf="!item.created_by && item.message_owner_email"
             href="{{'mailto:' + item.message_owner_email}}">
            <app-gravatar
              [email]="item.message_owner_email"
              [imgTitle]="item.created_by_display + ' on ' + datePipe.toDateTime(item.created_at)"
              [customStyle]="{
                width: '35px',
                borderRadius: '100%',
                verticalAlign: 'middle'
              }">
            </app-gravatar>
          </a>
        </ng-container>
        <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
          <app-gravatar *ngIf="item && !item.created_by && !item.email_generated && item.is_staff_generated"
            [email]="object.department_email"
            [imgTitle]="item.created_by_display + ' on ' + datePipe.toDateTime(item.created_at)"
            [customStyle]="{
              width: '35px',
              borderRadius: '100%',
              verticalAlign: 'middle'
            }">
          </app-gravatar>
          <app-gravatar *ngIf="item.created_by && item.created_by.id"
            [email]="item.message_owner_email"
            [imgTitle]="item.created_by_display + ' on ' + datePipe.toDateTime(item.created_at)"
            [customStyle]="{
              width: '35px',
              borderRadius: '100%',
              verticalAlign: 'middle'
            }">
          </app-gravatar>
          <app-gravatar *ngIf="!item.created_by && item.message_owner_email"
            [email]="item.message_owner_email"
            [imgTitle]="item.created_by_display + ' on ' + datePipe.toDateTime(item.created_at)"
            [customStyle]="{
              width: '35px',
              borderRadius: '100%',
              verticalAlign: 'middle'
            }">
          </app-gravatar>
        </ng-container>
      </div>
    </div>
    <div *ngIf="item.ticket_activity === false" layoutDirection="column" appFlex="95">
      <div class="ticket-message" layoutDirection="column"
           [class.foreign-ticket-message]="item.is_staff_generated"
           [class.ticket-note-message]="item.message_type === 'ticketnote'">
        <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.allow-edit-message'); else noEdit">
          <div [hidden]="!hoveredItems[item.message_type + item.id]"
               [attr.fl-tooltip]="actionsTooltip"
               fl-tooltip-direction="down"
               class="ticket-message-actions">
            <button mat-icon-button
                    [matMenuTriggerFor]="menuItemReply">
              <mat-icon class="fl-icons">more</mat-icon>
            </button>
            <mat-menu #menuItemReply="matMenu">
              <div>
                <button *ngIf="item.message_type !== 'ticketnote'" (click)="replyToReply(item.message, item.created_by)"
                        mat-menu-item i18n>Reply</button>
                <button *ngIf="item.message_type === 'ticketnote'; else editReply" (click)="editMessage(item)"
                        mat-menu-item i18n>Edit note</button>
                <ng-template #editReply>
                  <button (click)="editMessage(item)" mat-menu-item i18n>Edit reply</button>
                </ng-template>
                <button *ngIf="item.message_type === 'ticketnote'; else deleteReply"
                        (click)="removeMessage(item.id, item.message_type)" mat-menu-item i18n>Remove note</button>
                <ng-template #deleteReply>
                  <button (click)="removeMessage(item.id, item.message_type)" mat-menu-item i18n>Delete reply</button>
                </ng-template>
              </div>
            </mat-menu>
          </div>
        </ng-container>
        <ng-template #noEdit>
          <div [hidden]="!hoveredItems[item.message_type + item.id]"
               [attr.fl-tooltip]="replyTooltip"
               fl-tooltip-direction="down"
               class="ticket-message-actions">
            <button (click)="replyToReply(item.message, item.created_by)" mat-icon-button i18n>
              <mat-icon class="fl-icons">reply</mat-icon>
            </button>
          </div>
        </ng-template>
        <div class="ticket-message-timestamp"
             *ngIf="!item.ticket_activity" i18n>
          <div>
            <span *ngIf="item.message_type === 'ticketnote'" class="fl-bold">Note by</span>
            <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
              <a *ngIf="item.created_by && item.created_by.id"
                 [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]"
                 class="active-link">
                {{item.created_by_display}}
              </a>
              <a *ngIf="!item.created_by && item.message_owner_email"
                 href="{{'mailto:' + item.message_owner_email}}" class="active-link">
                {{item.created_by_display}}
              </a>
            </ng-container>
            <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
              <strong>
                {{item.created_by_display}}
              </strong>
            </ng-container>
            •
            <a class="timestamp-link"
               #replyLinks
               [id]="item.timestamp"
               [routerLink]="item.routerLink"
               [fragment]="item.fragment"
               [replaceUrl]="true"
               (click)="goToAnchor(item.timestamp, true, $event)"
               [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
              {{item.timestamp_display}}
            </a>
            <span *ngIf="item.source_ticket_id"> (merged from ticket
                <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
                   class="active-link">#{{item.source_ticket_id}}</a>)</span>
          </div>
          <p *ngIf="!item.created_by && item.message_owner_email && item.new_status">
            - ticket reopened because of email reply
          </p>
          <p *ngIf="!item.created_by && item.message_owner_email && item.new_cc">
            - added the following CC recipients: {{item.new_cc}}
          </p>
        </div>
        <div *ngIf="item.message" [innerHTML]="item.htmlMessage"></div>
        <div *ngIf="item.attachments.length">
          <span i18n>Attachments:</span>
          <span *ngFor="let attachment of item.attachments">
            <button class="transparent-background attachments-menu-btn" mat-flat-button [disableRipple]="true"
                    [matMenuTriggerFor]="menuItemAttachment">
              <app-icon [icon]="attachmentIcon"></app-icon>
              <span class="active-link">{{attachment.file_name}}</span>
            </button>
            <mat-menu #menuItemAttachment="matMenu">
              <div>
                <button (click)="downloadAttachment(attachment.id)" mat-menu-item i18n>
                  Download attachment
                </button>
                <button (click)="openAttachment(attachment.id)" mat-menu-item i18n>
                  Open attachment
                </button>
                <button *ngIf="authSvc.feature('ui.plugins.tickets.show-remove-attachment')"
                        (click)="removeAttachment(attachment.id, attachment.file_name)" mat-menu-item i18n>Remove attachment</button>
              </div>
            </mat-menu>
          </span>
        </div>
        <div *ngIf="item.last_edited" class="fl-detail" i18n>
          - Last edited
          <span [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </span>
          by
          <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
            <a class="active-link"
               [routerLink]="[config.getPanelUrl('clients-users/users'), item.last_edited_by.id]">
              {{item.last_edited_by.full_name}}
            </a>
          </ng-container>
          <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
            <span>
              {{item.last_edited_by.full_name}}
            </span>
          </ng-container>
        </div>
        <div class="cma-container">
          <div class="chat-message-arrow">
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="item.ticket_activity" class="ticket-activity">
      <div *ngIf="item.new_status && item.email_generated === false">
        <p class="fl-detail" i18n>
          <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
            <a class="active-link" *ngIf="item.created_by && item.created_by.id"
               [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
              {{item.created_by_display}}
            </a>
            <a class="active-link" *ngIf="!item.created_by && item.message_owner_email"
               href="{{'mailto:' + item.message_owner_email}}">
              {{item.created_by_display}}
            </a>
          </ng-container>
          <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
            <strong>
              {{item.created_by_display}}
            </strong>
          </ng-container>
          changed status to
          {{item.new_status}}
          <a [id]="item.timestamp"
             #replyLinks
             [routerLink]="item.routerLink"
             [fragment]="item.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(item.timestamp, true, $event)"
             [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </a>
          <span *ngIf="item.source_ticket_id">(merged from ticket
            <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
               class="active-link">#{{item.source_ticket_id}}</a>)</span>
        </p>
      </div>
      <div *ngIf="authSvc.feature('ui.staff') && item.email_generated === true && item.new_status">
        <p class="fl-detail" i18n>
          <a class="active-link" *ngIf="item.created_by && item.created_by.id"
             [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
            {{item.created_by_display}}
          </a>
          <a class="active-link" *ngIf="!item.created_by && item.message_owner_email"
             href="{{'mailto:' + item.message_owner_email}}">
            {{item.created_by_display}}
          </a>
          <span *ngIf="!item.created_by && !item.message_owner_email"><b>{{item.created_by_display}}</b></span>
          reopened ticket because of email reply
          <a [id]="item.timestamp"
             #replyLinks
             [routerLink]="item.routerLink"
             [fragment]="item.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(item.timestamp, true, $event)"
             [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </a>
          <span *ngIf="item.source_ticket_id">(merged from ticket
            <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
               class="active-link">#{{item.source_ticket_id}}</a>)</span>
        </p>
      </div>
      <div *ngIf="item.new_priority && authSvc.feature('ui.plugins.tickets.show-priority')">
        <p class="fl-detail" i18n>
          <a class="active-link"
             [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
            {{item.created_by_display}}
          </a> changed priority to
          {{item.new_priority}}
          <a [id]="item.timestamp"
             #replyLinks
             [routerLink]="item.routerLink"
             [fragment]="item.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(item.timestamp, true, $event)"
             [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </a>
          <span *ngIf="item.source_ticket_id">(merged from ticket
            <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
               class="active-link">#{{item.source_ticket_id}}</a>)</span>
        </p>
      </div>
      <div *ngIf="authSvc.feature('ui.plugins.tickets.show-assignee') && item.new_assignee">
        <p class="fl-detail" i18n>
          <a class="active-link"
             [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
            {{item.created_by_display}}
          </a> changed assignee to
          <a class="active-link"
             [routerLink]="[config.getPanelUrl('clients-users/users'), item.new_assignee.id]">
            {{item.new_assignee.display}}
          </a>
          <a [id]="item.timestamp"
             #replyLinks
             [routerLink]="item.routerLink"
             [fragment]="item.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(item.timestamp, true, $event)"
             [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </a>
          <span *ngIf="item.source_ticket_id">(merged from ticket
            <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
               class="active-link">#{{item.source_ticket_id}}</a>)</span>
        </p>
      </div>
      <div *ngIf="item.new_department">
        <p class="fl-detail" i18n>
          <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
            <a class="active-link"
               [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
              {{item.created_by_display}}
            </a>
          </ng-container>
          <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
            <strong>
              {{item.created_by_display}}
            </strong>
          </ng-container> changed department to
          {{item.new_department}}
          <a [id]="item.timestamp"
             #replyLinks
             [routerLink]="item.routerLink"
             [fragment]="item.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(item.timestamp, true, $event)"
             [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </a>
          <span *ngIf="item.source_ticket_id">(merged from ticket
            <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
               class="active-link">#{{item.source_ticket_id}}</a>)</span>
        </p>
      </div>
      <div *ngIf="item.new_cc">
        <p class="fl-detail" i18n>
          <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
            <a class="active-link"
               [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
              {{item.created_by_display}}
            </a>
          </ng-container>
          <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
            <strong>
              {{item.created_by_display}}
            </strong>
          </ng-container> added the following CC
          <span *ngIf="!item.new_cc.includes(','); else pluralCC">recipient</span><ng-template #pluralCC><span>recipients</span></ng-template>:
          {{item.new_cc}}
          <a [id]="item.timestamp"
             #replyLinks
             [routerLink]="item.routerLink"
             [fragment]="item.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(item.timestamp, true, $event)"
             [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </a>
          <span *ngIf="item.source_ticket_id">(merged from ticket
            <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
               class="active-link">#{{item.source_ticket_id}}</a>)</span>
        </p>
      </div>
      <div *ngIf="item.new_client">
        <p class="fl-detail" i18n>
          <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
            <a class="active-link"
               [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
              {{item.created_by_display}}
            </a>
          </ng-container>
          <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
            <strong>
              {{item.created_by_display}}
            </strong>
          </ng-container> changed client to
          {{item.new_client}}
          <a [id]="item.timestamp"
             #replyLinks
             [routerLink]="item.routerLink"
             [fragment]="item.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(item.timestamp, true, $event)"
             [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </a>
          <span *ngIf="item.source_ticket_id">(merged from ticket
            <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
               class="active-link">#{{item.source_ticket_id}}</a>)</span>
        </p>
      </div>
      <div *ngIf="item.title_changed">
        <p class="fl-detail" i18n>
          <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
            <a class="active-link"
               [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
              {{item.created_by_display}}
            </a>
          </ng-container>
          <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
            <strong>
              {{item.created_by_display}}
            </strong>
          </ng-container> changed title
          <a [id]="item.timestamp"
             #replyLinks
             [routerLink]="item.routerLink"
             [fragment]="item.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(item.timestamp, true, $event)"
             [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </a>
          <span *ngIf="item.source_ticket_id">(merged from ticket
            <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
               class="active-link">#{{item.source_ticket_id}}</a>)</span>
        </p>
      </div>
      <div *ngIf="item.description_changed">
        <p class="fl-detail" i18n>
          <ng-container *ngIf="authSvc.feature('ui.plugins.tickets.show-user-link')">
            <a class="active-link"
               [routerLink]="[config.getPanelUrl('clients-users/users'), item.created_by.id]">
              {{item.created_by_display}}
            </a>
          </ng-container>
          <ng-container *ngIf="!authSvc.feature('ui.plugins.tickets.show-user-link')">
            <strong>
              {{item.created_by_display}}
            </strong>
          </ng-container> changed description
          <a [id]="item.timestamp"
             #replyLinks
             [routerLink]="item.routerLink"
             [fragment]="item.fragment"
             [replaceUrl]="true"
             (click)="goToAnchor(item.timestamp, true, $event)"
             [attr.fl-tooltip]="item.created_at | dateFormatter : authSvc.dateTimeFormat">
            {{item.timestamp_display}}
          </a>
          <span *ngIf="item.source_ticket_id">(merged from ticket
            <a [routerLink]="[config.getPanelUrl('tickets'), item.source_ticket_id]"
               class="active-link">#{{item.source_ticket_id}}</a>)</span>
        </p>
      </div>
    </div>
  </div>

  <form [formGroup]="replyForm" class="fl-margin-top">
    <div #textareaWrapper class="fl-tinymce-placeholder">
      <editor #tinyMceArea [init]="tinyMCEOptions" (onKeyDown)="handleTinyKeyDown($event)"
              formControlName="replyText" [licenseKey]="'gpl'"></editor>
    </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>
</div>
