<div [ngClass]="{'previewMode' : !dashboardService.editMode}" class="wrapper">
	<div class="fixed-tabs">
		<div *ngIf="dashboardObject" class="header-navigation">
			<div class="row navigation">
				<div class="col-md-7 state-dashboard-row">{{'app.root.menu.action_center' | translate }} > {{'app.root.menu.my_dashboards' | translate }} >
					<span>{{dashboardObject.plantName}}</span>
					<span *ngIf="dashboardObject.systemName"> > </span>
					<span *ngIf="dashboardObject.systemName">{{dashboardObject.systemName}}</span>
				</div>
				<div class="col-md-5 time-zone">
					<span *ngFor="let a of [currentTime | utc: 'hh:mm:ss A' : false : false]; ">
						<span>{{'action_center.my-dashboard.your-time-preference' | translate }}:&nbsp;
							<input class="input input-time" disabled placeholder="{{a?.split(' ')[0]}} | {{a?.split(' ')[1]}}" /> </span>
					</span>
					<span *ngFor="let b of [currentTime | utc: 'hh:mm:ss A': true : false];" class="plant-time">
						<span> {{'alarm.alarm-action.plant-time-preference' | translate }}:&nbsp;
							<input class="input input-time" disabled placeholder="{{b?.split(' ')[0]}} | {{b?.split(' ')[1]}}" />
						</span>
					</span>
				</div>
			</div>
			<div class="row dashboard-actions" [ngClass]="{'template-name-background-transparent': !dashboardService.editMode}">
				<div class="col-md-4">
					<input id="dashboardName" type="text" placeholder="{{ 'action_center.my-dashboard.label.title_must_be_included' | translate }}"
					 [(ngModel)]="dashboardObject.payload.name" (ngModelChange)="dashboardService.dashboardChange = true" [title]="dashboardObject.payload.name"
					 class="dashboard-name edit-dashboard-name" [disabled]="!dashboardService.editMode" />
				</div>
				<div class="col-md-8 dashboard-properties-wrapper">
					<div class="dashboard-properties">
						<div class="loading-wrapper">
							<div *ngIf="!doneLoadingDashboard" class="loading-text">Loading the dashboard
								<i class="fa fa-spinner fa-spin"></i>
							</div>
							<div *ngIf="doneLoadingDashboard" class="text-fade-out loading-text">Dashboard is fully loaded!
							</div>
						</div>
						<div class="information-cirlce" [ngClass]="{'online-circle' : !(offlineSensor | async), 'offline-circle': (offlineSensor | async)}"
						 (click)="showStatusForSensors = !showStatusForSensors">
							<i class="fa fa-exclamation information-sign offline" aria-hidden="true" *ngIf="(offlineSensor | async)"></i>
							<i class="fa fa-info information-sign online" aria-hidden="true" *ngIf="!(offlineSensor | async)"></i>
						</div>
						<div class="button-wrapper">
							<button class="btn btn-add btn-primary preview-button list-button" (click)="showButtonWrapper = !showButtonWrapper">
								<i class="fa fa-list" aria-hidden="true"></i>
							</button>
							<div class="actions-buttons" *ngIf="showButtonWrapper">
								<button *ngIf="!viewMode" class="btn btn-add btn-primary preview-button" (click)="cancelDashboard();showButtonWrapper = false">Cancel</button>
								<button *ngIf="dashboardService.editMode && dashboardObject.systemId" (click)="setDashboardAsDefault('system');showButtonWrapper = false"
								 class="btn btn-add btn-primary preview-button" [disabled]="dashboardObject.isDefaultForSystem" [ngClass]="{'default-selected': dashboardObject.isDefaultForSystem}">
									<span *ngIf="dashboardObject.isDefaultForSystem">{{ 'action_center.my-dashboard.button.default_for_system' | translate }}</span>
									<span *ngIf="!dashboardObject.isDefaultForSystem">{{ 'action_center.my-dashboard.button.default_for_system' | translate }}</span>
								</button>
								<button *ngIf="dashboardService.editMode && dashboardObject.plantId" (click)="setDashboardAsDefault('plant');showButtonWrapper = false"
								 class="btn btn-add btn-primary preview-button" [disabled]="dashboardObject.isDefaultForPlant" [ngClass]="{'default-selected': dashboardObject.isDefaultForPlant}">
									<span *ngIf="dashboardObject.isDefaultForPlant">{{ 'action_center.my-dashboard.button.default_for_plant' | translate }}</span>
									<span *ngIf="!dashboardObject.isDefaultForPlant">{{ 'action_center.my-dashboard.button.default_for_plant' | translate }}</span>
								</button>
								<button *ngIf="dashboardService.editMode" (click)="previewDashboard();showButtonWrapper = false" class="btn btn-add btn-primary preview-button">
									<span>{{ 'action_center.my-dashboard.button.preview_mode' | translate }}</span>
								</button>
								<button *ngIf="!dashboardService.editMode && 'ActionCenter/Dashboard' | rolePipe : 'edit'" (click)="editDashboard();showButtonWrapper = false"
								 class="btn btn-add btn-primary preview-button">
									<span>{{ 'action_center.my-dashboard.button.edit_mode' | translate }}</span>
								</button>
								<button *ngIf="!viewMode" id="saveDashboard" (click)="saveDashboard();showButtonWrapper = false" class="btn btn-add btn-primary save-button">{{ 'action_center.my-dashboard.button.save_dashboard' | translate }}</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="menu-container">
			<menu-component></menu-component>
		</div>

	</div>
	<div class="dashboard-content" *ngIf="dashboardObject" [ngClass]="{'dashboard-content-edit': dashboardService.editMode}"
	 [ngClass]="{'dashboard-content-preview': !dashboardService.editMode}">
		<ng-container *nmDynamicContainer="dashboardObject.payload" (onClose)="closeModal($event)"></ng-container>
	</div>

	<div class="dashboard-content-small-screen">
		<p class="small-screen-title">
			<b>Page Builder</b> is not available on small screen.
		</p>
		<p class="small-screen-subtitle">
			Editor is not adapted to screen smaller than 1024px.
		</p>
		<p class="small-screen-subtitle">
			For that reason, page builder is only visible on screen bigger.
		</p>
	</div>
</div>

<spinner-modal #spinner="bs-modal"></spinner-modal>

<modal-message #modal (onClose)="confirmCancellingDashboard($event)"></modal-message>

<offline-gateway *ngIf="showStatusForSensors" [showModalTest]="showStatusForSensors" [showOverlay]="showStatusForSensors"
 [dashboardLastUpdate]="dashboardObject.updated" (onClose)="showStatusForSensors = false;"></offline-gateway>