<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">
			<a routerLink="cloud/organizations" routerLinkActive="active" class="nav-link" aria-current="page"><span class="nav-text">Organizations</span></a>
			<a routerLink="vdcs" routerLinkActive="active" class="nav-link"><span class="nav-text">Datacenters</span></a>
			<a routerLink="applications" routerLinkActive="active" class="nav-link"><span class="nav-text">Applications</span></a>

			<clr-dropdown class="dropdown">
				<button class="nav-link nav-text" class="hamburger-button" clrDropdownTrigger>
					<clr-icon shape="bars" size="24"></clr-icon>
				</button>
				<clr-dropdown-menu clrPosition="bottom-left" *clrIfOpen>
				<a
                    *ngFor="let extensionNavRegistration of extensionNavRegistrations; trackBy: trackByIndex"
                    [routerLink]="pluginsRoute + extensionNavRegistration.path"
                    [title]="extensionNavRegistration?.descriptionText"
                    routerLinkActive="active"
                    clrDropdownItem
                >
                    {{ extensionNavRegistration?.nameText }}
                </a>
				</clr-dropdown-menu>
			</clr-dropdown>
		</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"
></vcd-extension-application>

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