<div class="chat-window__header">
  <div class="user-avatar chat-window__avatar">
    <div class="user-avatar__cover ">
      <app-avatar
        class="user-avatar__photo my--block my--cursor"
        (click)="onShowUser(mdVmMessages.data.userInfo.id)"
        [userInfo]="mdVmMessages.data.userInfo"
      >
      </app-avatar>
    </div>
    <div class="user-avatar__about">
      <h2 class="user-avatar__name text-cutting chat-window__about">
        {{ mdVmMessages.data.userInfo.name }}
      </h2>
    </div>
  </div>
  <span
    *ngIf="screenSize !== size.DESKTOP && getNewMsgCount() !== 0 && isScrolled"
    class="feed-message__count__base"
    >{{ parseBadge(getNewMsgCount()) }}</span
  >
</div>
<div class="chat-window__content">
  <!--  </div>-->
  <app-spinner
    *ngIf="mdVmMessages.status === status.LOADING"
    class="my-content-absolute my-container"
    [message]="txtMessagesLoading"
  ></app-spinner>
  <app-error
    *ngIf="mdVmMessages.status === status.FAILED"
    class="my-content-absolute my-container"
    [message]="txtError"
    (clickChange)="onLoad()"
  ></app-error>
  <!--  <ng-scrollbar-->
  <!--    [style.display]="-->
  <!--      mdVmMessages.status === status.LOADED ||-->
  <!--      mdVmMessages.status === status.PENDING-->
  <!--        ? 'block'-->
  <!--        : 'none'-->
  <!--    "-->
  <!--    #ngScrollbar-->
  <!--    class="my-scrollbar"-->
  <!--    [shown]="'hover'"-->
  <!--  >-->
  <div
    class="chat-window__item"
    *ngFor="let message of mdVmMessages.data.messages"
  >
    <app-message
      class="chat-message"
      [screenSize]="screenSize"
      [isRead]="message.isRead === true && message.userId === currUserInfo.id"
      [userInfo]="
        currUserInfo.id === message.userId
          ? currUserInfo
          : mdVmMessages.data.userInfo
      "
      [message]="message"
      (showUserChange)="onShowUser($event)"
    >
    </app-message>
  </div>
  <!--  </ng-scrollbar>-->
</div>
<footer class="chat-window__footer">
  <!--add-message-->
  <form
    *ngIf="
      mdVmMessages.data.isActive === true &&
      (mdVmMessages.data.conversationStatus !== status.FAILED ||
        (mdVmMessages.data.conversationStatus === status.LOADED &&
          mdVmMessages.status !== status.LOADING))
    "
    class="add-message"
  >
    <!--      <button class="add-message__button add-message__files">-->
    <!--        <i class="simple-upload-icon"></i>Прикрепить файл-->
    <!--      </button>-->
    <div class="add-message__input">
      <textarea
        class="simple-textarea add-message__textarea"
        name="chat-textarea"
        [placeholder]="txtWrite"
        [(ngModel)]="messageText"
        (keydown.enter)="
          this.screenSize === size.DESKTOP ? $event.preventDefault() : null
        "
        (keyup.enter)="
          this.screenSize === size.DESKTOP ? onSendMessage() : null
        "
      ></textarea>
      <!--        <button class="add-message__button add-message__smiles">-->
      <!--          <i class="simple-smiles-icon"></i>Меню смайлов-->
      <!--        </button>-->
      <!--        <button class="add-message__button add-message__voice">-->
      <!--          <i class="simple-voice-icon"></i>Включить микрофон-->
      <!--        </button>-->
    </div>
    <button
      class="add-message__button add-message__submit"
      (click)="onSendMessage()"
    >
      <i class="simple-submit-icon"></i>Отправить сообщение
    </button>
  </form>
  <!--add-message-->
  <div *ngIf="mdVmMessages.data.isActive === false" class="chat-window__closed">
    <i class="simple-warning-icon"></i>Данный запрос был закрыт
  </div>

  <div
    *ngIf="mdVmMessages.data.conversationStatus === status.FAILED"
    class="chat-window__closed"
  >
    <i class="simple-warning-icon"></i>{{ txtErrorLoadData }}
  </div>
</footer>