<div id="chat">
  <div #errorMessage id="error-message">Konnte keine Verbindung herstellen!</div>

  <div #chatPostArea id="chat-post-area" (scroll)="onScroll()">
    <div *ngFor="let message of messages" class="chat-post" [class.chat-own-post]="userId === message.userId">
      <img (click)="citeUsername(message.username)" class="chat-avatar" src="{{url}}/user/{{message.userId}}/avatar?token={{userToken}}">
      <div class="chat-message-area" (click)="citeMessage(message.username, message.message)">
        <div class="chat-username">{{message.username}}</div>
        <div [innerHTML]="message.htmlMessage" class="chat-post-message"></div>
        <div class="chat-datetime">{{message.datetime}}</div>
      </div>
    </div>
  </div>

  <div #chatTypeArea id="chat-type-area">
    <div id="textarea-container">
      <textarea #chatTextArea [(ngModel)]="chatText" (input)="onInput()" id="chat-textarea" autofocus maxlength="2000"></textarea>
    </div>
    <button #buttonSend class="button-send-offline" (click)="postMessage()" id="button-send"></button>
  </div>
</div>
