<div id="emoji-container">
  <app-emoji-picker (selectEmojiEvent)="handleEmojiInsert($event)" [style.display]="toggledEmojiPopup ? 'block' : 'none'"></app-emoji-picker>
</div>
<div id="editor-container" [ngClass]="{ messageLong: messageLengthTooLong }">
  <div id="editor">
    <textarea id="native-editor" [placeholder]="placeholder" #editor [(ngModel)]="value" (change)="change($event)"></textarea>
  </div>
  <div id="actions">
    <button mat-icon-button [ngClass]="{ hide: messageSending }" #emojiBtn id="insert-emoji-btn" (click)="onToggleEmojiPopup()">
      <mat-icon>insert_emoticon</mat-icon>
    </button>
    <button mat-icon-button *ngIf="!messageSending" (click)="submit()" [disabled]="messageLengthTooLong">
      <mat-icon>send</mat-icon>
    </button>
  </div>

  <div id="messageSendingLoader" *ngIf="messageSending">
    <mat-spinner diameter="20"></mat-spinner>
  </div>

  <span id="messageTooLongError" class="warn" *ngIf="messageLengthTooLong">Message too long! ({{ plainText.length }}/{{ messageMaxLength }})</span>
</div>
