<ng-template [(tuiDialog)]="changeLogOpen"
             [tuiDialogOptions]="{closable: false, dismissible: false, label: 'chat.changeLogDialog.label'|translate}">
  <h3>{{ "version"|translate }}</h3>
  <ul>
    <li>{{ "chat.changeLogDialog.changeLog.1"|translate }}</li>
    <li>{{ "chat.changeLogDialog.changeLog.2"|translate }}</li>
  </ul>

  <button tuiButton iconStart="@tui.check"
          (click)="localStorage.setItem('changeLogLastRead', environment.version); changeLogOpen.set(false)">{{ "ok"|translate }}
  </button>
</ng-template>

@if (serviceManager.currentSession() == null) {
  <main style="width: 100%; height: 100svh; display: flex; justify-content: center; align-items: center;">
    <tui-loader size="xl"/>
  </main>
} @else {
  @if (breakpoint() != "mobile") {
    <main id="layout" tuiGroup [collapsed]="true">
      <aside id="chatnav">
        <aside>
          <tui-segmented id="mode_switcher" [(activeItemIndex)]="navigationActiveIndex">
            <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" disabled>
            <tui-icon icon="@tui.cog"/>
          </button>
        </aside>

        <main>
          @switch (navigationActiveIndex) {
            @case (0) {
              <app-dm-list [token]="serviceManager.currentSession()!.token"
                           [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
            }
            @case (1) {
              <network-list [token]="serviceManager.currentSession()!.token"
                            [userid]="serviceManager.currentSession()!.userData.userid"></network-list>
            }
            @case (2) {
              <app-picture-list [token]="serviceManager.currentSession()!.token"
                            [userid]="serviceManager.currentSession()!.userData.userid"></app-picture-list>
            }
          }
        </main>
      </aside>

      <main id="content">
        <div id="content_tint">
          @if (router.url.startsWith("/chat/dm") && router.url.startsWith("/chat/picture")) {
            <!-- To ensure data is loaded -->
            @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
              <router-outlet/>
            }
          } @else if (router.url.startsWith("/chat/network")) {
            @defer (when serviceManager.networksStatus() != LoadStatus.loading) {
              <router-outlet/>
            }
          } @else {
            <router-outlet/>
          }
        </div>
      </main>
    </main>
  } @else {
    <main id="layout_mobile">
      @if (!routerOutletActive()) {
        <div id="navigation">
          <div id="navigation_content">
            @switch (navigationActiveIndex) {
              @case (0) {
                <app-dm-list [token]="serviceManager.currentSession()!.token"
                             [userid]="serviceManager.currentSession()!.userData.userid"></app-dm-list>
              }
              @case (1) {
                <network-list [token]="serviceManager.currentSession()!.token"
                              [userid]="serviceManager.currentSession()!.userData.userid"></network-list>
              }
            }
          </div>

          <nav tuiTabBar [(activeItemIndex)]="navigationActiveIndex">
            @for (item of tabBarItems; track item; let i = $index) {
              <button
                [disabled]="!item.implemented"
                [class.disabled]="!item.implemented"
                tuiTabBarItem
                type="button"
                [icon]="item.icon"
                (click)="navigationActiveIndex = i"
              >
                {{ item.text | translate }}
              </button>
            }
          </nav>
        </div>
      }

      @if (router.url.startsWith("/chat/dm")) {
        <!-- To ensure data is loaded -->
        @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
          <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
        }
      } @else if (router.url.startsWith("/chat/network")) {
        @defer (when serviceManager.networksStatus() != LoadStatus.loading) {
          <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
        }
      } @else {
        <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
      }
    </main>
  }
}
