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

        <button mat-button (click)="parent.navigate()" class="cory-layout-header-title" >
                <i [class]="parent.icon"></i>
               {{ extractTitle(parent.packageJson) }}
        </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'" class="cory-layout-header-top-{{ parent.packageJson.corifeus.type }}" style="text-transform: {{ parent.packageJson.corifeus.type === 'p3x' ? 'uppercase' : 'capitalize' }};">
                {{ 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="fa fa-trello"></i>
            <span class="cory-mat-hide-xsmall">
                Trello
            </span>
        </a>
        -->

        <!-- 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="fa fa-{{ linkExternal(menu.link) ? 'external-link' : 'caret-right' }}"></i>
                </span>

                {{ i18n.pages.menu[menu.name] }}
            </button>
        </mat-menu>

        <button mat-button [matMenuTriggerFor]="menuItems">
            <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('github/' + 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()">
            <mat-icon>apps</mat-icon>
            <span class="cory-mat-hide-xsmall">
               {{ i18n.pages.title.packages }}
            </span>
        </button>


    </mat-toolbar>
</div>