<main [class.mobile]="breakpoint() == 'mobile'">
  @defer (when store) {
    <navbar backButtonDest="/chat/network/{{networkId}}" showBackButtonAt="desktopSmall">
      <div class="data">
        <div class="chat-data">
          @switch (store!.channelData().type) {
            @case ("message") {
              <tui-icon icon="@tui.hash"></tui-icon>
            }
            @case ("broadcast") {
              <tui-icon icon="@tui.radio"></tui-icon>
            }
            @case ("voice") {
              <tui-icon icon="@tui.audio-lines"></tui-icon>
            }
          }
          <span class="main-name">{{ store!.channelData().name }}</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>
