Chocobozzz/PeerTube

<div *ngIf="customCSS" [innerHTML]="customCSS"></div>

<a i18n class="visually-hidden-focusable skip-to-content" href="#content" (click)="$event.preventDefault(); mainContent.focus()">Skip to main content</a>

<my-hotkeys-cheat-sheet (hotkeysModalStateChange)="onHotkeysModalStateChange($event)"></my-hotkeys-cheat-sheet>

<div
  class="peertube-container"
  [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn(), 'hotkeys-modal-opened': hotkeysModalOpened }"
>
  <header class="root-header">

    <div class="top-left-block">
      <button
        class="border-0 p-0" [title]="getToggleTitle()" (click)="menu.toggleMenu()" (keyup.enter)="menu.toggleMenu()"
        [ariaExpanded]="menu.isMenuDisplayed" aria-controls="left-menu"
      >
        <span class="icon icon-menu"></span>
      </button>

      <a class="peertube-title c-hand" [routerLink]="getDefaultRoute()" [queryParams]="getDefaultRouteQuery()">
        <span class="icon icon-logo"></span>
        <span class="instance-name">{{ instanceName }}</span>
      </a>
    </div>

    <div class="root-header-right">
      <my-header class="w-100 d-flex justify-content-end"></my-header>
    </div>
  </header>

  <div class="sub-header-container">
    <my-menu id="left-menu" role="navigation" aria-label="Main menu" i18n-ariaLabel [hidden]="!menu.isMenuDisplayed"></my-menu>

    <main #mainContent tabindex="-1" id="content" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">

      <div class="main-row">

        <div *ngIf="broadcastMessage" class="broadcast-message alert" [ngClass]="broadcastMessage.class">
          <div [innerHTML]="broadcastMessage.message"></div>

          <button
            *ngIf="broadcastMessage.dismissable" (click)="hideBroadcastMessage()"
            class="border-0" title="Close this message" i18n-title
          >
            <my-global-icon iconName="cross"></my-global-icon>
          </button>
        </div>

        <router-outlet></router-outlet>
      </div>
    </main>
  </div>
</div>

<ngx-loading-bar [includeSpinner]="false" [color]="'var(--mainColor)'"></ngx-loading-bar>

<my-confirm></my-confirm>

<p-toast position="bottom-right">
  <ng-template let-message pTemplate="message">
    <div class="notification-block">
      <my-global-icon [iconName]="getNotificationIcon(message)"></my-global-icon>

      <div class="message">
        <h3>{{ message.summary }}</h3>
        <p>{{ message.detail }}</p>
      </div>
    </div>
  </ng-template>
</p-toast>

@defer (when isUserLoggedIn()) {
  <my-account-setup-warning-modal #accountSetupWarningModal></my-account-setup-warning-modal>
  <my-admin-welcome-modal #adminWelcomeModal></my-admin-welcome-modal>
  <my-instance-config-warning-modal #instanceConfigWarningModal></my-instance-config-warning-modal>
}

<my-custom-modal #customModal></my-custom-modal>