<div *ngIf="tickets && !tickets.length" class="fl-heading-md fl-gray-color" i18n>No tickets</div>
<app-fl-backdrop *ngIf="!tickets || loading" overlayParent></app-fl-backdrop>
<div *ngIf="tickets && tickets.length" layoutDirection="column">
  <table class="full-width" mat-table [dataSource]="tickets">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef i18n>ID</th>
      <td class="position-relative" mat-cell *matCellDef="let ticket">
        <app-status-line [direction]="LineDirection.Vertical" [type]="LineType.Solid"
                         [color]="ticket.appLineColor"></app-status-line>
        <a [routerLink]="[config.getPanelUrl('tickets'), ticket.id]">
          {{ticket.id}}
        </a>
      </td>
    </ng-container>
    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef class="fl-padding-left-small" i18n>Subject</th>
      <td mat-cell *matCellDef="let ticket" class="fl-padding-left-small">
        <a [routerLink]="[config.getPanelUrl('tickets'), ticket.id]">
          <span *ngIf="ticket.title && ticket.title.length > 120; else shortEnough" [title]="ticket.title">
            {{ticket.title | slice:0:120}}...
          </span>
          <ng-template #shortEnough>{{ticket.title}}</ng-template>
        </a>
      </td>
    </ng-container>
    <ng-container matColumnDef="last_reply_at">
      <th mat-header-cell *matHeaderCellDef class="hide-xs" i18n>Last reply at</th>
      <td mat-cell *matCellDef="let ticket" class="hide-xs">
        <a [routerLink]="[config.getPanelUrl('tickets'), ticket.id]">
          <app-date-displayer [date]="ticket.last_reply_at" withTime></app-date-displayer>
        </a>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <div *ngIf="previousPage || nextPage" class="fl-margin-top">
    <button mat-button (click)="changePage('previous')"
            [disabled]="previousPage === false || loading === true" color="primary" i18n>
      Previous page <ng-container *ngIf="previousPage && loading !== true">({{currentPage - 1}})</ng-container>
    </button>
    <button mat-button (click)="changePage('next')"
            [disabled]="nextPage === false || loading === true" color="primary" i18n>
      Next page <ng-container *ngIf="nextPage && loading !== true">({{currentPage + 1}})</ng-container>
    </button>
  </div>

</div>
<a mat-button color="primary" class="fl-margin-top" *ngIf="data"
   [routerLink]="[config.getPanelUrl('tickets/open-new-ticket'), data.clientId]" i18n>
  Open ticket for client
</a>
