<clr-main-container>
    <clr-header>
        <div class="branding">
            <a [routerLink]="'welcome'" class="nav-link">
                <img *ngIf="branding.headerLogo; else defaultLogo" [src]="branding.headerLogo" class="header-logo" />
                <span class="title">{{branding.headerTitle}}</span>
            </a>
        </div>

        <div class="header-nav">
            <clr-dropdown class="language-changer">
                <button class="btn btn-sm btn-primary" clrDropdownTrigger>
                    Language: {{ activeLang }}
                    <cds-icon shape="angle" direction="down"></cds-icon>
                </button>
                <clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
                    <div *ngFor="let lang of supportedLangs" (click)="langChange(lang)" [attr.aria-label]="lang" clrDropdownItem>{{ lang }}</div>
                </clr-dropdown-menu>
            </clr-dropdown>

            <a [routerLink]="ALL_IN_ONE" routerLinkActive="active" class="nav-link" aria-current="page"><span
                    class="nav-text">Extension Points</span></a>
        </div>

        <div class="header-actions">
            <div (click)="toogleTheme()" class="header-action">
                <button class="btn btn-link nav-link"><cds-icon [attr.shape]="activeThemeIconShape"></cds-icon>{{
                    activeThemeName }}</button>
            </div>
        </div>
    </clr-header>

    <div class="content-wrapper">
        <main class="content">
            <router-outlet></router-outlet>
        </main>
    </div>
</clr-main-container>

<vcd-extension-application [id]="ANGULAR_APP_PRIMARY_NAVIGATION"
    [vcdExtensionApplications]="ANGULAR_APP_PRIMARY_NAVIGATION" />

<ng-template #defaultLogo>
    <cds-icon shape="plugin" class="header-logo"></cds-icon>
</ng-template>