@if (serviceManager.currentSession() == null) {
  <main style="width: 100%; height: 100svh; display: flex; justify-content: center; align-items: center;">
    <tui-loader size="xl"/>
  </main>
} @else {
  <main id="layout" tuiGroup [collapsed]="true">
    <aside id="chatnav">
      <aside>
        <tui-segmented id="mode_switcher">
          <button>
            <tui-icon icon="@tui.message-circle"/>
          </button>
          <button>
            <tui-icon icon="@tui.network"/>
          </button>
          <button>
            <tui-icon icon="@tui.image"/>
          </button>
        </tui-segmented>

        <button id="bottom_btn" tuiButton appearance="flat">
          <tui-icon icon="@tui.cog"/>
        </button>
      </aside>

      <main>
        <app-dm-list [token]="serviceManager.currentSession()!.token" [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
      </main>
    </aside>

    <main id="content">
      <div id="content_tint">
        @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
          <router-outlet/>
        }
      </div>
    </main>
  </main>
}