<main [class.mobile]="breakpoint() == 'mobile'">
  @defer (when store) {
    <navbar backButtonDest="/chat">
      <div class="data">
        <oimg [src]="store.chatData().pfp" height="50px" width="50px" [radius]="15"></oimg>
        <div class="chat-data">
          @if (store.chatData().displayName == "") {
            <span class="main-name">{{'@'+store.chatData().username}}</span>
          } @else {
            <span class="main-name">{{store.chatData().displayName}}</span>
            <span class="alt-name">{{'@'+store.chatData().username}}</span>
          }
        </div>
      </div>

      <div class="items-right">
        <button tuiButton appearance="flat" disabled>
          <tui-icon icon="@tui.phone"/>
        </button>
      </div>
    </navbar>

    <messages [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>

    <message-box [viewModel]="store.messageBox"/>
  }

</main>
