@if (parent.packageJson !== undefined) {
  <header class="cory-mat-header" style="z-index: 2" role="banner">
    <mat-toolbar color="primary" class="cory-layout-menus">
      <a mat-button
        [href]="'/' + parent.currentRepo + '/index.html'"
        (click)="$event.preventDefault(); parent.navigate()"
        class="cory-layout-header-title" aria-label="Navigate to package home">
        <span [innerHTML]="generateIcon()" aria-hidden="true"></span>
        <span [matTooltip]="extractTitleWithStars(parent.packageJson)" matTooltipPosition="below"
        class="cory-pages-layout-header-title">{{ extractTitle(parent.packageJson) }}</span>
      </a>
      <div class="cory-layout-header-top">
        @if (parent.packageJson.corifeus.type === undefined && parent.packageJson.name !== 'corifeus') {
          <span
            style="text-transform: capitalize;">
            {{ this.settings.github.repoNames }}
          </span>
        }
        @if (parent.packageJson.corifeus.type !== undefined && (parent.packageJson.corifeus.type !== 'lede' || parent.packageJson.corifeus.type !== 'build')) {
          <span
            class="cory-layout-header-top-{{ parent.packageJson.corifeus.type }}"
            style="text-transform: uppercase;">
            {{ parent.packageJson.corifeus.type }}
          </span>
        }
        {{ parent.packageJson.corifeus.code }}
      </div>
      <span class="cory-mat-fill-horizontal"></span>
      <!-- trello
      <a mat-button [href]="settings.trello.url" target="_blank">
        <i class="fab fa-trello"></i>
        <span class="cory-mat-hide-xsmall">
          Trello
        </span>
      </a>
      -->
      @if (parent.packageJson.name !== 'corifeus') {
        <a mat-button class="cory-pages-menu-effect"
          href="/"
          (click)="$event.preventDefault(); parent.navigate('/');" aria-label="Go to home page">
          <mat-icon aria-hidden="true">home</mat-icon>
          <span class="cory-mat-hide-xsmall">
            {{ i18n.pages.title.home }}
          </span>
        </a>
      }
      <!-- menu -->
      @if (parent.packageJson.corifeus.menu) {
        <span>
          <mat-menu #menuItems="matMenu" y-position="below" x-position="before">
            <button disabled mat-menu-item>
              {{ i18n.material.title.menu }}
            </button>
            @for (menu of parent.packageJson.corifeus.menu; track menu) {
              <a
                mat-menu-item
                [href]="menuHref(menu.link)"
                [target]="linkExternal(menu.link) ? '_blank' : null"
                [rel]="linkExternal(menu.link) ? 'noopener' : null"
                (click)="onMenuItemClick($event, menu.link)"
                [class.cory-mat-menu-item-active]="parent.menuMenuActive == menu.link"
                >
                <span style="min-width: 24px !important; display: inline-block; text-align: center;">
                  <i class="{{ linkExternal(menu.link) ? 'fas fa-external-link-alt' : 'fas fa-caret-right' }}"></i>
                </span>
                {{ (i18n?.pages?.menu || {})[menu.name] || menu.name }}
              </a>
            }
          </mat-menu>
          <button mat-button [matMenuTriggerFor]="menuItems" class="cory-pages-menu-effect">
            <mat-icon>menu</mat-icon>
            <span class="cory-mat-hide-xsmall">
              {{ i18n.material.title.menu }}
            </span>
          </button>
        </span>
      }
      <!-- packages -->
      <mat-menu #menuModules="matMenu" y-position="below" x-position="before">
        <button disabled mat-menu-item>
          {{ i18n.pages.title.packages }}
        </button>
        @for (repo of parent.repos; track repo) {
          <a mat-menu-item
            [href]="'/' + repo + '/index.html'"
            (click)="$event.preventDefault(); parent.navigate('/' + repo + '/index.html' ); parent.menuRepoActive = repo; parent.menuMenuActive = undefined; "
            [class.cory-mat-menu-item-active]="parent.currentRepo == repo"
            >
            @if (parent.packages[repo]) {
              <span>
                <span style="min-width: 24px !important; display: inline-block; text-align: center;">
                  @if (parent.packages[repo]) {
                    <i class="{{parent.packages[repo].corifeus.icon}}"></i>
                  }
                </span>
                {{ extractTitle(parent.packages[repo]) }}
                <div style="float: right; margin-left: 5px; opacity: 0.25;">
                  {{ parent.packages[repo].corifeus.code }}
                </div>
              </span>
            }
          </a>
        }
      </mat-menu>
      <!--        <button mat-button [matMenuTriggerFor]="menuModules" (click)="parent.menuSidenev.toggle()"> -->
      <button mat-button (click)="parent.packageMenuOpen()" class="cory-pages-menu-effect" aria-label="Open packages panel">
        <mat-icon aria-hidden="true">apps</mat-icon>
        <span class="cory-mat-hide-xsmall">
          {{ i18n.pages.title.packages }}
        </span>
      </button>
    </mat-toolbar>
  </header>
}