<div #chat id="chat" (touchmove)="onChatTouch($event)" (touchend)="onTouchEnd()">
  <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>

<div #sidebar id="sidebar" (touchmove)="onSidebarTouch($event)" (touchend)="onTouchEnd()">
  <div id="userlist">
    <div *ngFor="let user of userList" class="user">
      <div class="userlist-element"><img src="{{url}}/user/{{user.userId}}/avatar?token={{userToken}}" class="chat-avatar userlist-avatar"></div>
      <div class="userlist-element"><div class="">{{user.username}}</div></div>
    </div>
  </div>
</div>
