<div *ngIf="object" class="fl-content email-message-log-container fl-content-min-height" layoutDirection="column" appLayoutGap="5px">
  <ng-container *ngIf="authSvc.feature('ui.enduser'); else staffView">
    <p class="fl-detail" i18n>Sent to: {{object.to}}</p>
    <p class="fl-detail" i18n>CC: {{object.cc | nullValue}}</p>
  </ng-container>
  <ng-template #staffView>
    <p class="fl-detail" *ngIf="object.enduser_recipients" i18n>To end-users: {{object.enduser_recipients}}</p>
    <p class="fl-detail" *ngIf="object.staff_recipients" i18n>To staff users: {{object.staff_recipients}}</p>
  </ng-template>
  <p class="fl-detail" i18n>Sent on: <app-date-displayer [date]="object.created_at" withTime></app-date-displayer></p>
  <ng-container *ngIf="authSvc.feature('ui.utilities.email-messages-log.show-client')">
    <p class="fl-detail" i18n>Client:
      <a *ngIf="object.client"
         [routerLink]="config.getPanelUrl('clients-users/clients', object.client.id)"
         class="active-link">{{object.client.display || object.client.name}}</a>
      <span *ngIf="!object.client && object.client_name">{{object.client_name}}</span>
      <span *ngIf="!object.client && !object.client_name">n/a</span>
    </p>
  </ng-container>
  <ng-container *ngIf="authSvc.feature('ui.utilities.email-messages-log.show-user')">
    <p class="fl-detail" i18n>User:
      <a *ngIf="object.user"
         [routerLink]="config.getPanelUrl('clients-users/users', object.user.id)"
         class="active-link">{{object.user.full_name || object.user.email}}</a>
      <span *ngIf="!object.user && object.user_name">{{object.user_name}} ({{object.user_email}})</span>
      <span *ngIf="!object.user && !object.user_name">n/a</span>
    </p>
  </ng-container>
  <ng-container *ngIf="authSvc.feature('ui.utilities.email-messages-log.show-error') && object.error_message">
    <p class="fl-detail" i18n>Error: {{object.error_message}}</p>
  </ng-container>

  <div class="message-body fl-margin-top" [innerHTML]="object.body"></div>
</div>
