<div class="cory-mat-header" *ngIf="parent.packageJson !== undefined"  style="z-index: 2">
    <mat-toolbar color="primary" class="cory-layout-menus">

        <button mat-button (click)="parent.navigate()" class="cory-layout-header-title">
            <span [innerHTML]="generateIcon()"></span>
            <span [matTooltip]="extractTitleWithStars(parent.packageJson)" matTooltipPosition="below"
                  class="cory-pages-layout-header-title">{{ extractTitle(parent.packageJson) }}</span>
        </button>
        <div class="cory-layout-header-top">
            <span *ngIf="parent.packageJson.corifeus.type === undefined && parent.packageJson.name !== 'corifeus'"
                  style="text-transform: capitalize;">
                {{ this.settings.github.repoNames }}
            </span>
            <span
                *ngIf="parent.packageJson.corifeus.type !== undefined && (parent.packageJson.corifeus.type !== 'lede' || parent.packageJson.corifeus.type !== 'build')"
                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>
        -->


        <button *ngIf="parent.packageJson.name !== 'corifeus'" mat-button class="cory-pages-menu-effect"
                (click)="parent.navigate('/');">
            <mat-icon>home</mat-icon>
            <span class="cory-mat-hide-xsmall">
                {{ i18n.pages.title.home }}
            </span>
        </button>


        <!-- menu -->
        <span *ngIf="parent.packageJson.corifeus.menu">
        <mat-menu #menuItems="matMenu" y-position="below" x-position="before">
            <button disabled mat-menu-item>
                {{ i18n.material.title.menu }}
            </button>
            <button
                mat-menu-item
                *ngFor="let menu of parent.packageJson.corifeus.menu"
                (click)="navigateMenu(menu.link); parent.menuMenuActive = 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] }}
            </button>
        </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>
            <button mat-menu-item
                    *ngFor="let repo of parent.repos"
                    (click)="parent.navigate('/' + repo + '/index.html' ); parent.menuRepoActive = repo; parent.menuMenuActive = undefined; "
                    [class.cory-mat-menu-item-active]="parent.menuRepoActive == repo"
            >
                <span *ngIf="parent.packages[repo]">
                    <span style="min-width: 24px !important; display: inline-block; text-align: center;">
                        <i *ngIf="parent.packages[repo]" 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>
            </button>
        </mat-menu>

        <!--        <button mat-button [matMenuTriggerFor]="menuModules" (click)="parent.menuSidenev.toggle()"> -->
        <button mat-button (click)="parent.packageMenuOpen()" class="cory-pages-menu-effect">
            <mat-icon>apps</mat-icon>
            <span class="cory-mat-hide-xsmall">
               {{ i18n.pages.title.packages }}
            </span>
        </button>


    </mat-toolbar>
</div>