app-chats-window
<div>
  <div class="message">
    <div class="author-image">
      <img alt="{{ message.user.name }}" src="{{ message.user.photo.i64 }}" title="{{ message.user.name }}" />
    </div>
    <div class="content-controls">
      <div class="author-details">
        <div class="d-flex justify-content-space-between">
          <div class="d-flex align-items-center">
            <span class="name">{{ message.user.name }}</span>
            <span class="username">@{{ message.user.username }}</span>
            <img
              *ngIf="message.user.is_expert"
              alt="Expert Tick"
              class="expert-icon"
              src="/assets/images/Expert-Tick.svg"
              title="Expert Tick"
            />
          </div>
          <div class="date">{{ moment(message.created_at).format("MMM D [']YY") }}</div>
        </div>
      </div>
      <div [innerHTML]="message.content | linky : { sanitizeHtml: true }" class="content"></div>
      <div class="details-flag">
        <div (click)="login() && permittedActions.includes(allActions.FLAG) && emitFlag(message.id)" class="clickable">
          <p
            [ngClass]="{ 'error-text': message.flags_count > 0 }"
            nbTooltip="Report this message. (3 reports will delete it)"
            nbTooltipStatus="warning"
          >
            <span *ngIf="message.flags_count > 0">{{ message.flags_count }}</span>
            <nb-icon icon="flag-outline"></nb-icon>
          </p>
        </div>
        <div
          (click)="login() && currentUser && message.user.id === currentUser.id && emitDelete(message.id)"
          *ngIf="currentUser && message.user.id === currentUser.id"
          class="clickable"
          nbTooltip="Delete"
          nbTooltipStatus="warning"
        >
          <p>
            <nb-icon icon="close-circle-outline"></nb-icon>
          </p>
        </div>
        <div
          (click)="this.login() && permittedActions.includes(allActions.VOTE) && emitVote(message.id)"
          class="votes clickable"
          nbTooltip="Like!"
          nbTooltipStatus="danger"
        >
          <p
            [ngClass]="{
              low: message.votes_count > 0 && message.votes_count <= 2,
              medium: message.votes_count > 2 && message.votes_count <= 4,
              high: message.votes_count > 4
            }"
          >
            <nb-icon *ngIf="message.votes_count === 0" icon="heart-outline" status="danger"></nb-icon>
            <nb-icon *ngIf="message.votes_count > 0" icon="heart" status="danger"></nb-icon>
            {{ message.votes_count > 0 ? message.votes_count : '' }}
          </p>
        </div>
        <div
          (click)="toggleReplyForm()"
          *ngIf="permittedActions.includes(allActions.ADD) && canReply"
          class="clickable reply-button"
        >
          <p class="text-info">
            <small>Reply</small>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="canReply" class="replies-container">
    <div *ngFor="let rep of message.user_messages" class="reply-message">
      <app-user-personal-chat-message
        (sendDelete)="emitDelete($event)"
        (sendFlag)="emitFlag($event)"
        (sendVote)="emitVote($event)"
        [allActions]="allActions"
        [canReply]="false"
        [currentUser]="currentUser"
        [message]="rep"
        [permittedActions]="permittedActions"
      ></app-user-personal-chat-message>
    </div>
    <div *ngIf="showReplyForm" class="reply-form">
      <form (ngSubmit)="emitReply()" *ngIf="canReply" [formGroup]="userMessageReplyForm">
        <input
          fieldSize="tiny"
          formControlName="content"
          fullWidth
          nbInput
          placeholder="Reply (max 200 characters)"
          type="text"
        />
        <button [disabled]="!userMessageReplyForm.valid" fullWidth nbButton size="tiny" status="info" type="submit">
          <nb-icon icon="corner-down-left-outline"></nb-icon>
        </button>
      </form>
    </div>
  </div>
</div>