<header>
  <img
    width="128"
    [src]="assetsPath + '/logos/logo-white.svg'"
    [alt]="brandName + ' Manager'" />

  @if (canUseManager | async) {
    <nav class="title-m">
      <ul>
        <li
          routerLink="accounts"
          routerLinkActive="active">
          Accounts
        </li>
        @if (canSeeUsers | async) {
          <li
            routerLink="users"
            routerLinkActive="active">
            Users
          </li>
        }
        @if (canManageZones | async) {
          <li
            routerLink="zones"
            routerLinkActive="active">
            Zones
          </li>
        }
      </ul>
    </nav>
  }
  <pa-avatar
    size="small"
    [avatar]="avatar | async"
    [paPopup]="userMenu"></pa-avatar>
</header>

<pa-dropdown #userMenu>
  <pa-option
    icon="log-out"
    (click)="logout()">
    {{ 'generic.logout' | translate }}
  </pa-option>
</pa-dropdown>
<div class="page-container">
  @if (!(canUseManager | async)) {
    <div class="forbidden-message">You don't have enough permissions to use the manager.</div>
  }

  @if (canUseManager | async) {
    <router-outlet></router-outlet>
  }
</div>
