@defer(when store) {
  <div id="layout" [class.routerOutletActive]="routerOutletActive()" [class.hideNetworkNav]="routerOutletActive() && breakpoint() == 'desktopSmall'">
    <div id="router">
      <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"></router-outlet>
    </div>
    <div id="network-data">
      <navbar backButtonDest="/chat" dataAlignment="center">
        <div class="data">
          <oimg [src]="store.networkData().picture" height="50px" width="50px" [radius]="15"></oimg>
          <h2>{{store.networkData().name}}</h2>
        </div>

        <div class="items-right"></div>
      </navbar>

      <main tuiGroup orientation="vertical" style="width: 100%">
        @for (category of store.networkData().categories; track category) {
          <div class="category">
            <h2>{{category.name}}</h2>

            <div tuiGroup orientation="vertical" style="width: 100%">
              @for (channel of category.channels; track channel) {
                <button tuiButton class="channel" appearance="secondary" [disabled]="channel.type != 'message'" [routerLink]="'/chat/network/'+store.networkData().networkId+'/'+category.categoryId+'/'+channel.channelId">
                  @switch (channel.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>{{channel.name}}</span>
                </button>
              }
            </div>
          </div>
        }
      </main>
    </div>
  </div>
}