<cory-mat-loading [cory-visible]="packages === undefined"></cory-mat-loading>

<cory-layout-header [parent]="this"></cory-layout-header>

<mat-sidenav-container class="cory-layout-sidenav-container" [style.z-index]="menuSidenav.opened ? 2 : 1">
  <mat-sidenav #menuSidenav position="end" class="cory-layout-sindenav" style="width: 370px; max-width: 100%; "
    (openedChange)="onSidenavOpenedChange($event)"
    (closedStart)="onSidenavClosedStart()"
    role="navigation" aria-label="Package navigation">
    <div class="cory-pages-sidenav-sticky">
      <div class="cory-pages-sidenav-heading">
        <span class="cory-pages-sidenav-title">{{ i18n?.title?.packages }}</span>
        <button mat-icon-button color="primary" class="cory-pages-sidenav-close"
          (click)="packageMenuClose()" aria-label="Close package menu">
          <mat-icon aria-hidden="true">close</mat-icon>
        </button>
      </div>

      <form class="cory-layout-sidenav-search" (keydown)="keyDownFunction($event)" role="search" aria-label="Search packages">
      <mat-form-field appearance="outline" style="width: 100%;" class="cory-layout-search-field">
        <input matInput #searchText (keyup)="search(searchText.value)" placeholder="{{ i18n?.title?.search }}" aria-label="Search packages"/>
        @if (searchText.value.trim() != '') {<ng-container matSuffix><mat-icon style="cursor: pointer; position: relative; top: 3px;"
            (click)="searchText.value = ''; search('')" color="primary" aria-label="Clear search">clear
          </mat-icon></ng-container>}
      </mat-form-field>

      @if (reposSearch?.length === 0) {
        <span style="opacity: 0.5;" role="status">
          {{ i18n?.title?.searchNotFound }}
        </span>
      }
    </form>
    </div>

    @for (repo of reposSearch; track repo) {
      <a mat-menu-item
        [href]="'/' + repo + '/index.html'"
        (click)="$event.preventDefault(); navigate('/' + repo + '/index.html' ); menuRepoActive = repo; menuMenuActive = undefined; packageMenuClose()"
        [class.cory-mat-menu-item-active]="currentRepo == repo"
        [attr.aria-current]="currentRepo == repo ? 'page' : null"
        >
        @if (packages && packages[repo]) {
          <span class="cory-pages-layout-menu-row">
            <span id="cory-pages-layout-menu-main-icon" class="cory-pages-layout-menu-cell">
              <i [class]="packages[repo].corifeus.icon||'fas fa-bolt'" aria-hidden="true"></i>
            </span>
            <span class="cory-pages-layout-menu-main-title cory-pages-layout-menu-cell">
              {{ extractTitle(packages[repo]) }}
            </span>
            @if (packages[repo].corifeus.stargazers_count > 0) {
              <span
                class="cory-pages-layout-menu-stars cory-pages-layout-menu-cell"
                [attr.aria-label]="packages[repo].corifeus.stargazers_count + ' GitHub stars'">
                <i class="fas fa-star" aria-hidden="true"></i>&nbsp;{{ extractStars(packages[repo].corifeus.stargazers_count) }}
              </span>
            }
            <span class="cory-pages-layout-menu-code cory-pages-layout-menu-cell">
              {{ packages[repo].corifeus.code }}
            </span>
          </span>
        }
      </a>
    }
  </mat-sidenav>

  <main class="cory-mat-container" role="main">
    <mat-card appearance="outlined">
      @if (packageJson !== undefined) {
        <mat-card-content style="position: relative;">
          @if (showTitle) {
            <cory-web-pages-build-status style="float: left;" [cory-pkg]="packageJson"
            ></cory-web-pages-build-status>
          }
          @if (showTitle) {
            <div style="float: right; font-weight: bold; font-size: 125%;">
              <span>v{{ packageJson.version }}</span>
              @if (packageJson.corifeus.stargazers_count > 0) {
                <div style="text-align: right;">
                  <i class="fas fa-star" aria-hidden="true"></i>&nbsp;<span [matTooltip]="(packageJson.corifeus.stargazers_count > 999 ? packageJson.corifeus.stargazers_count + ' ' : '') + i18n.title.githubStars"
                  matTooltipPosition="below"
                  [attr.aria-label]="packageJson.corifeus.stargazers_count + ' GitHub stars'">{{
                  extractStars(packageJson.corifeus.stargazers_count) }}
                </span>
              </div>
            }
          </div>
        }
        @if (showTitle) {
          <div style="clear: both"></div>
        }
        <h1 id="cory-mat-pages-title" class="cory-layout-title">{{ title }}</h1>
        @if (packageJson.corifeus.angular) {
          <h2 style="margin-top: 8px;">Built on Angular v{{ packageJson.corifeus.angular }}</h2>
        }
        <router-outlet>
        </router-outlet>
      </mat-card-content>
    }
  </mat-card>
</main>
</mat-sidenav-container>

<cory-layout-footer [parent]="this"></cory-layout-footer>