@defer (when store) {
  <navbar>
    <div class="items-left">
       <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">
        <tui-icon icon="@tui.phone"/>
      </button>
    </div>
    {{chatid}}
  </navbar>

  <messages [messages]="store.messages()"/>

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