<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <mat-accordion class="predefined-replies-accordion"
                   *ngIf="predefinedReplyCategories && predefinedReplyCategories.length; else noCategories">
      <mat-expansion-panel *ngFor="let category of predefinedReplyCategories"
                           (opened)="openedExpansionPanel(category)">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{category.name}}
          </mat-panel-title>
          <mat-panel-description>
          </mat-panel-description>
        </mat-expansion-panel-header>
        <app-flashing-dots *ngIf="loadingReplies"></app-flashing-dots>
        <table class="fl-table" *ngIf="predefinedReplies && predefinedReplies.length; else noReplies">
          <tbody>
            <tr class="fl-cursor-pointer" (click)="insert(predefinedReply)"
                *ngFor="let predefinedReply of predefinedReplies">
              <td class="predefined-reply-td">
                <div class="fl-ellipsis-text">{{predefinedReply.title}}</div>
              </td>
              <td [title]="predefinedReply.content">
                <div class="predefined-reply-content fl-ellipsis-text" [innerHTML]="predefinedReply.content"></div>
              </td>
            </tr>
          </tbody>
        </table>
        <ng-template #noReplies>
          <span class="fl-detail" *ngIf="!loadingReplies" i18n>No replies defined in this category.</span>
        </ng-template>
      </mat-expansion-panel>
    </mat-accordion>
    <ng-template #noCategories>
      <span class="fl-detail" i18n>No replies defined.</span>
    </ng-template>
  </ng-template>
</app-common-dialog>
