@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>

      <tui-tabs [(activeItemIndex)]="tabActiveIndex">
        <button
          iconStart="@tui.hash"
          tuiTab
          type="button"
        >
          {{"chat.network.tabs.channels"|translate}}
        </button>

        <button
          disabled
          iconStart="@tui.users"
          tuiTab
          type="button"
        >
          {{"chat.network.tabs.members"|translate}}
        </button>

        <button
          iconStart="@tui.cog"
          tuiTab
          type="button"
        >
          {{"chat.network.tabs.settings"|translate}}
        </button>
      </tui-tabs>

      <br/>

      @switch (tabActiveIndex) {
        @case (0) {
          <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]="router.url.endsWith(channel.channelId) ? 'primary' : '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>
        }
        @case (2) {
          <main id="settings">
            <network-settings [networkStore]="this.store"></network-settings>
          </main>
        }
      }
    </div>
  </div>
}