<div height="80" class="bn darkmenu headerENEA">
	<a routerLink="/" routerLinkActive="active"> <img
		src="https://www.enea.it/images/layout/logoenearetina.png" height="40"
		class="p-mr-2 mr1 logo ml-2" style="vertical-align: middle;">
	</a> 
	<span class="header-title" style="display:inline; vertical-align: middle;">
	{{ 'HEADER.TITLE' | translate }}</span> 
	<span
		style="float: inherit; display: flex;">
		<button mat-menu-item [routerLink]="'/'" queryParamsHandling="merge">
			<mat-icon class="mat-icon whiteIcon">home</mat-icon>
		</button>
		<button  mat-menu-item [matMenuTriggerFor]="languages" style="float: right;"
			class="initialMenu">
			<mat-icon class="whiteIcon">language</mat-icon>
		</button>
		<button mat-menu-item *ngIf="!userService.user" (click)="login()" style="float: right;"
			class="initialMenu"
			queryParamsHandling="merge">
 			<mat-icon class="whiteIcon material-icon">login</mat-icon>
		</button>
		<button  mat-menu-item color="accent" [matMenuTriggerFor]="tools"
			aria-label="Tool menu"
			*ngIf="this.userService.user">
			<mat-icon class="whiteIcon">apps</mat-icon>
		</button>
		<button mat-menu-item color="accent" [matMenuTriggerFor]="communityManager"
		*ngIf="isManager">
			<mat-icon class="whiteIcon">data_thresholding</mat-icon>
		</button>
		<mat-menu #communityManager="matMenu">
			<ng-template matMenuContent *ngFor="let page of pages;">
				<button mat-menu-item
					*ngIf="(page.slug !== 'my-devices' && page.slug !== 'my-communities'
						&& page.slug !== 'chi-siamo') && page.permissionId !=='admin'
						&& (page.communityId === userService.selectedCommunity || page.communityId === 0)
						&& page.permissionId === 'community-view' && page.showInMenu"
					(click)="goToPage(page.slug)" 
					routerLink="{{ page.path }}" 
					[routerLinkActive]="['is-active']" 
					queryParamsHandling="merge">
					<mat-icon class="mat-icon-grey">equalizer</mat-icon>
					{{ page.name }}
				</button>
			</ng-template>
		</mat-menu>
		<button mat-menu-item color="accent" [matMenuTriggerFor]="adminTools"
			aria-label="Admin menu"
			*ngIf="isAdmin">
			<mat-icon class="whiteIcon">engineering</mat-icon>
		</button>
		<button mat-menu-item color="accent" *ngIf="userService.user" [matMenuTriggerFor]="menu"
			aria-label="Initial menu">
			<mat-icon class="whiteIcon">settings</mat-icon>
		</button> 
		<mat-menu #menu="matMenu">
			<div *ngIf="userService.user">
				<button mat-menu-item (click)="logout()">
					<mat-icon class="mat-icon-grey">logout</mat-icon>
					<span>{{ 'LOGIN.SIGN_OUT' | translate }}</span>
				</button>
				<button mat-menu-item routerLink="pages/my-communities"
					queryParamsHandling="merge">
					<mat-icon class="mat-icon-grey">hub</mat-icon>
					<span>{{ 'LABEL.MY_COMMUNITIES' | translate }}</span>
				</button>
				<button mat-menu-item routerLink="pages/my-devices" 
					queryParamsHandling="merge">
					<mat-icon class="mat-icon-grey">sensors</mat-icon>
					<span>{{ 'LABEL.MY_DEVICES' | translate }}</span>
				</button>
				<button mat-menu-item routerLink="/changepassword"
					queryParamsHandling="merge">
					<mat-icon class="mat-icon-grey">person</mat-icon>
					<span>{{ 'LABEL.CHANGEPASSWORD' | translate }}</span>
				</button>
				<button mat-menu-item routerLink="/my-personal-data"
					queryParamsHandling="merge">
					<mat-icon class="mat-icon-grey">person</mat-icon>
					<span>{{ 'LABEL.MY_PROFILE' | translate }}</span>
				</button>
				<button mat-menu-item routerLink="pages/chi-siamo">
					<mat-icon class="mat-icon-grey">people</mat-icon>
					<span>{{ 'LABEL.WHO_WE_ARE' | translate }}</span>
				</button>
			</div>
		</mat-menu> 
		<mat-menu #languages="matMenu"> <img
			*ngFor="let lang of translate.getLangs()"
			[src]="'assets/images/lang/64/' + lang + '.png'"
			class="flags hidden md:inline-block" (click)="setActualLanguage(lang)" />
		</mat-menu> 
		<mat-menu #tools="matMenu">
			<div *ngFor="let page of pages;">
				<button mat-menu-item
					*ngIf="(page.slug !== 'my-devices' && page.slug !== 'my-communities'
						&& page.slug !== 'chi-siamo') && page.permissionId !=='admin'
						&& (page.communityId === userService.selectedCommunity || page.communityId === 0)
						&& page.permissionId != 'community-view' && page.showInMenu"
					(click)="goToPage(page.slug)" routerLink="{{ page.path }}" 
					[routerLinkActive]="['is-active']" 
					queryParamsHandling="merge">
					<mat-icon class="mat-icon-grey">equalizer</mat-icon>
					<span>{{ page.name }}</span>
				</button>
			</div>
		</mat-menu>
		<mat-menu #adminTools="matMenu">
			<div *ngFor="let page of pages;">
				<button mat-menu-item
					*ngIf="page.permissionId =='admin'"
					(click)="goToPage(page.slug)" routerLink="{{ page.path }}" 
					[routerLinkActive]="['is-active']" 
					queryParamsHandling="merge">
					<mat-icon class="mat-icon-grey">dashboard-customize</mat-icon>
					<span>{{ page.name }}</span>
				</button>
			</div>
		</mat-menu>
	</span>
</div>
<div class="div-table community-select" *ngIf="userService?.user && userService.user?.usercommunities" >
	<div class="div-table-row">
		<div class="div-table-cell">{{ 'LABEL.SELECT_A_COMMUNITY' |
			translate }}</div>
		<div class="div-table-cell">
			<p-dropdown [options]="userService.user?.usercommunities ?? []" [(ngModel)]="this.userService.community"
				optionLabel="communityName"
				placeholder="{{ 'LABEL.SELECT_A_COMMUNITY' | translate }}"
				(onChange)="setCommunity($event)"
				> </p-dropdown>
		</div>
	</div>
</div>
<!-- button mat-menu-item *ngIf="!user" [routerLink]="'/login'">
			<mat-icon>login</mat-icon>
			<span>{{ 'LOGIN.SIGN_IN' | translate }}</span>
		</button -->
<!-- <p-avatar *ngIf="user" icon="pi pi-user"
			styleClass="p-mr-2 hidden md:inline-flex" size="large" shape="circle"
			[style]="{'background-color---DISABLED':'#2196F3', 'color---DISABLED': '#ffffff'}"></p-avatar>
 -->
