<div class="fl-content fl-content-min-height">
  <div *ngIf="predefinedReplies && !predefinedReplies.length"
       class="fl-heading-md fl-gray-color"
       i18n>No predefined replies in this category</div>
  <app-fl-backdrop *ngIf="!predefinedReplies || loading" overlayParent></app-fl-backdrop>
  <div *ngIf="predefinedReplies && predefinedReplies.length" layoutDirection="column">
    <div *ngFor="let predefinedReply of predefinedReplies; let last=last">
      <p class="fl-ellipsis-text fl-heading-md fl-margin-bottom-small">{{predefinedReply.title}}</p>
      <div class="predefined-reply-content fl-ellipsis-text" [innerHTML]="predefinedReply.content"></div>
      <app-object-actions [objectActions]="predefinedRepliesActions[predefinedReply.id]" [maxVisibleActions]="2"
                          class="fl-margin-top">
      </app-object-actions>
      <mat-divider *ngIf="!last" class="fl-margin-top-small"></mat-divider>
    </div>

    <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>
</div>
