<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row">

    <md-sidenav-container>

        <!-- CENTER -->
        <div class="center" fxFlex fusePerfectScrollbar>

            <!-- HEADER -->
            <div class="header md-accent-bg p-24 pb-0" fxLayout="column" fxLayoutAlign="space-between">

                <div fxLayout="row" fxLayoutAlign="space-between start">

                    <span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!</span>

                    <button md-icon-button fuseMdSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
                        <md-icon>menu</md-icon>
                    </button>
                </div>

                <div fxLayout="row">

                    <div class="selected-project">{{selectedProject.name}}</div>

                    <button md-icon-button class="project-selector" [mdMenuTriggerFor]="projectsMenu" aria-label="Select project">
                        <md-icon>more_horiz</md-icon>
                    </button>

                    <md-menu #projectsMenu="mdMenu">
                        <button md-menu-item *ngFor="let project of projects" (click)="selectedProject = project">
                            <span>{{project.name}}</span>
                        </button>
                    </md-menu>
                </div>
            </div>
            <!-- / HEADER -->

            <!-- CONTENT -->
            <div class="content">

                <md-tab-group dynamicHeight>

                    <md-tab label="Home">

                        <div class="widget-group p-12" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">

                            <!-- WIDGET 1 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
                                    <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
                                        <md-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
                                                   aria-label="Change range">
                                            <md-option *ngFor="let range of widgets.widget1.ranges | keys"
                                                       [value]="range.key">
                                                {{range.value}}
                                            </md-option>
                                        </md-select>

                                        <button md-icon-button fuseWidgetToggle aria-label="more">
                                            <md-icon>more_vert</md-icon>
                                        </button>

                                    </div>

                                    <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
                                        <div class="light-blue-fg font-size-72 line-height-72">
                                            {{widgets.widget1.data.count[widgets.widget1.currentRange]}}
                                        </div>
                                        <div class="h3 secondary-text font-weight-500">{{widgets.widget1.data.label}}</div>
                                    </div>

                                    <div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
                                        <span class="h4 secondary-text text-truncate">{{widgets.widget1.data.extra.label}}:</span>
                                        <span class="h4 ml-8">{{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}}</span>
                                    </div>
                                </div>
                                <!-- / Front -->

                                <!-- Back -->
                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
                                        <md-icon class="s-16">close</md-icon>
                                    </button>

                                    <div>
                                        {{widgets.widget1.detail}}
                                    </div>
                                </div>
                                <!-- / Back -->

                            </fuse-widget>
                            <!-- / WIDGET 1 -->

                            <!-- WIDGET 2 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
                                    <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div class="h3">{{widgets.widget2.title}}</div>

                                        <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
                                            <md-icon>more_vert</md-icon>
                                        </button>
                                    </div>

                                    <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
                                        <div class="red-fg font-size-72 line-height-72">
                                            {{widgets.widget2.data.count}}
                                        </div>
                                        <div class="h3 secondary-text font-weight-500">{{widgets.widget2.data.label}}</div>
                                    </div>

                                    <div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
                                        <span class="h4 secondary-text text-truncate">{{widgets.widget2.data.extra.label}}:</span>
                                        <span class="h4 ml-8">{{widgets.widget2.data.extra.count}}</span>
                                    </div>
                                </div>
                                <!-- / Front -->

                                <!-- Back -->
                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
                                        <md-icon class="s-16">close</md-icon>
                                    </button>

                                    <div>
                                        {{widgets.widget2.detail}}
                                    </div>
                                </div>
                                <!-- / Back -->

                            </fuse-widget>
                            <!-- / WIDGET 2 -->

                            <!-- WIDGET 3 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
                                    <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div class="h3">{{widgets.widget3.title}}</div>

                                        <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
                                            <md-icon>more_vert</md-icon>
                                        </button>
                                    </div>

                                    <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
                                        <div class="orange-fg font-size-72 line-height-72">
                                            {{widgets.widget3.data.count}}
                                        </div>
                                        <div class="h3 secondary-text font-weight-500">{{widgets.widget3.data.label}}</div>
                                    </div>

                                    <div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
                                        <span class="h4 secondary-text text-truncate">{{widgets.widget3.data.extra.label}}:</span>
                                        <span class="h4 ml-8">{{widgets.widget3.data.extra.count}}</span>
                                    </div>
                                </div>
                                <!-- / Front -->

                                <!-- Back -->
                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
                                        <md-icon class="s-16">close</md-icon>
                                    </button>

                                    <div>
                                        {{widgets.widget3.detail}}
                                    </div>
                                </div>
                                <!-- / Back -->

                            </fuse-widget>
                            <!-- / WIDGET 3 -->

                            <!-- WIDGET 4 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
                                    <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div class="h3">{{widgets.widget4.title}}</div>

                                        <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" aria-label="more">
                                            <md-icon>more_vert</md-icon>
                                        </button>
                                    </div>

                                    <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
                                        <div class="blue-grey-fg font-size-72 line-height-72">{{widgets.widget4.data.count}}
                                        </div>
                                        <div class="h3 secondary-text font-weight-500">{{widgets.widget4.data.label}}</div>
                                    </div>

                                    <div class="p-16 grey-50-bg border-top" fxLayout="row" fxLayoutAlign="start center">
                                        <span class="h4 secondary-text text-truncate">{{widgets.widget4.data.extra.label}}:</span>
                                        <span class="h4 ml-8">{{widgets.widget4.data.extra.count}}</span>
                                    </div>
                                </div>
                                <!-- / Front -->

                                <!-- Back -->
                                <div class="fuse-widget-back p-16 pt-32 md-white-bg mat-elevation-z2">
                                    <button md-icon-button fuseWidgetToggle class="fuse-widget-flip-button" ng-click="flipWidget()" aria-label="Flip widget">
                                        <md-icon class="s-16">close</md-icon>
                                    </button>

                                    <div>
                                        {{widgets.widget4.detail}}
                                    </div>
                                </div>
                                <!-- / Back -->

                            </fuse-widget>
                            <!-- / WIDGET 4 -->


                            <!-- WIDGET 5 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">

                                    <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutWrap>

                                        <div fxFlex class="py-8 h3">{{widgets.widget5.title}}</div>

                                        <div fxFlex="0 1 auto" class="py-8" fxLayout="row">
                                            <button md-button class="px-16"
                                                    *ngFor="let range of widgets.widget5.ranges | keys"
                                                    (click)="widget5.currentRange = range.key"
                                                    [disabled]="widget5.currentRange == range.key">
                                                {{range.value}}
                                            </button>
                                        </div>
                                    </div>

                                    <div fxLayout="row" fxLayoutAlign="start end" fxLayoutWrap>
                                        <div class="h-420 mb-16" fxLayout="row" fxFlex="100" fxFlex.gt-sm="50">
                                            <ngx-charts-bar-vertical-stacked
                                                *fuseIfOnDom
                                                [scheme]="widget5.scheme"
                                                [results]="this.widgets.widget5.mainChart[this.widget5.currentRange]"
                                                [gradient]="widget5.gradient"
                                                [xAxis]="widget5.xAxis"
                                                [yAxis]="widget5.yAxis"
                                                [legend]="widget5.legend"
                                                [showXAxisLabel]="widget5.showXAxisLabel"
                                                [showYAxisLabel]="widget5.showYAxisLabel"
                                                [xAxisLabel]="widget5.xAxisLabel"
                                                [yAxisLabel]="widget5.yAxisLabel"
                                                (select)="widget5.onSelect($event)">
                                            </ngx-charts-bar-vertical-stacked>
                                        </div>

                                        <div class="mb-16" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="row" fxLayoutWrap>

                                            <div fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="center"
                                                 *ngFor="let widget of widgets.widget5.supporting | keys">

                                                <div class="px-24">
                                                    <div class="h4 secondary-text">{{widget.value.label}}</div>
                                                    <div class="mat-display-1 m-0">
                                                        {{widget.value.count[widget5.currentRange]}}
                                                    </div>
                                                </div>

                                                <div class="h-64">
                                                    <ngx-charts-area-chart
                                                        *fuseIfOnDom
                                                        [results]="widget.value.chart[widget5.currentRange]"
                                                        [scheme]="widget5.supporting.scheme"
                                                        [gradient]="widget5.supporting.gradient"
                                                        [xAxis]="widget5.supporting.xAxis"
                                                        [yAxis]="widget5.supporting.yAxis"
                                                        [legend]="widget5.supporting.legend"
                                                        [showXAxisLabel]="widget5.supporting.showXAxisLabel"
                                                        [showYAxisLabel]="widget5.supporting.showYAxisLabel"
                                                        [xAxisLabel]="widget5.supporting.xAxisLabel"
                                                        [yAxisLabel]="widget5.supporting.yAxisLabel"
                                                        [curve]="widget5.supporting.curve">
                                                    </ngx-charts-area-chart>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- / Front -->

                            </fuse-widget>
                            <!-- / WIDGET 5 -->


                            <!-- WIDGET 6 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">

                                    <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div class="h3">{{widgets.widget6.title}}</div>
                                        <div class="py-16">
                                            <md-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
                                                <md-option *ngFor="let range of widgets.widget6.ranges | keys"
                                                           [value]="range.key">
                                                    {{range.value}}
                                                </md-option>
                                            </md-select>
                                        </div>
                                    </div>

                                    <div class="h-400">
                                        <ngx-charts-pie-chart
                                            *fuseIfOnDom
                                            [scheme]="widget6.scheme"
                                            [results]="widgets.widget6.mainChart[widget6.currentRange]"
                                            [legend]="widget6.showLegend"
                                            [explodeSlices]="widget6.explodeSlices"
                                            [labels]="widget6.labels"
                                            [doughnut]="widget6.doughnut"
                                            [gradient]="widget6.gradient"
                                            (select)="widget6.onSelect($event)">
                                        </ngx-charts-pie-chart>
                                    </div>

                                    <div class="py-8 mh-16 border-top" fxLayout="row" fxLayoutAlign="start center" fxLayoutWrap>
                                        <div class="py-8 border-right" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50">
                                            <span class="mat-display-1 mb-0">{{widgets.widget6.footerLeft.count[widget6.currentRange]}}</span>
                                            <span class="h4">{{widgets.widget6.footerLeft.title}}</span>
                                        </div>

                                        <div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50">
                                            <span class="mat-display-1 mb-0">{{widgets.widget6.footerRight.count[widget6.currentRange]}}</span>
                                            <span class="h4">{{widgets.widget6.footerRight.title}}</span>
                                        </div>
                                    </div>

                                </div>
                                <!-- / Front -->

                            </fuse-widget>
                            <!-- / WIDGET 6 -->

                            <!-- WIDGET 7 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">

                                    <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div class="h3">{{widgets.widget7.title}}</div>

                                        <div class="py-16">
                                            <md-select class="simplified" [(ngModel)]="widget7.currentRange"
                                                       aria-label="Change range">
                                                <md-option *ngFor="let range of widgets.widget7.ranges | keys"
                                                           [value]="range.key">
                                                    {{range.value}}
                                                </md-option>
                                            </md-select>
                                        </div>
                                    </div>

                                    <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"
                                         *ngFor="let event of widgets.widget7.schedule[widget7.currentRange]">
                                        <div>
                                            <div class="h3">{{event.title}}</div>
                                            <div>
                                                <span class="secondary-text">{{event.time}}</span>
                                                <span *ngIf="event.location">, {{event.location}}</span>
                                            </div>
                                        </div>

                                        <button md-icon-button aria-label="More information">
                                            <md-icon>more_vert</md-icon>
                                        </button>
                                    </div>

                                </div>
                                <!-- / Front -->

                            </fuse-widget>
                            <!-- / WIDGET 7 -->

                        </div>
                        <!-- / WIDGET GROUP -->


                    </md-tab>

                    <md-tab label="Budget Summary">

                        <!-- WIDGET GROUP -->
                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">

                            <!-- WIDGET 8 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
                                    <div class="h3 p-16">
                                        {{widgets.widget8.title}}
                                    </div>

                                    <md-divider></md-divider>

                                    <div class="h-400">
                                        <ngx-charts-pie-chart
                                            *fuseIfOnDom
                                            [scheme]="widget8.scheme"
                                            [results]="widgets.widget8.mainChart"
                                            [legend]="widget8.legend"
                                            [explodeSlices]="widget8.explodeSlices"
                                            [labels]="widget8.labels"
                                            [doughnut]="widget8.doughnut"
                                            [gradient]="widget8.gradient"
                                            (select)="widget8.onSelect($event)">
                                        </ngx-charts-pie-chart>
                                    </div>

                                </div>
                                <!-- / Front -->

                            </fuse-widget>
                            <!-- / WIDGET 8 -->

                            <!-- WIDGET 9 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">
                                    <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div class="h3">{{widgets.widget9.title}}</div>

                                        <div class="py-16">
                                            <md-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
                                                <md-option *ngFor="let range of widgets.widget9.ranges | keys"
                                                           [value]="range.key">
                                                    {{range.value}}
                                                </md-option>
                                            </md-select>

                                        </div>
                                    </div>

                                    <div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
                                         fxLayoutAlign.gt-xs="space-between end">
                                        <div fxFlex="0 1 auto">
                                            <div class="h4 secondary-text">{{widgets.widget9.weeklySpent.title}}</div>
                                            <div class="pt-8 mat-display-1 m-0 font-weight-300 text-nowrap">
                                                <span class="secondary-text">$</span>
                                                <span>{{widgets.widget9.weeklySpent.count[widget9.currentRange]}}</span>
                                            </div>
                                        </div>
                                        <div class="h-52" fxFlex>
                                            <ngx-charts-area-chart
                                                *fuseIfOnDom
                                                [results]="widgets.widget9.weeklySpent.chart[widget9.currentRange]"
                                                [scheme]="widget9.scheme"
                                                [gradient]="widget9.gradient"
                                                [xAxis]="widget9.xAxis"
                                                [yAxis]="widget9.yAxis"
                                                [legend]="widget9.legend"
                                                [showXAxisLabel]="widget9.showXAxisLabel"
                                                [showYAxisLabel]="widget9.showYAxisLabel"
                                                [xAxisLabel]="widget9.xAxisLabel"
                                                [yAxisLabel]="widget9.yAxisLabel"
                                                [curve]="widget9.curve">
                                            </ngx-charts-area-chart>
                                        </div>
                                    </div>

                                    <div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
                                         fxLayoutAlign.gt-xs="space-between end">
                                        <div fxFlex="0 1 auto">
                                            <div class="h4 secondary-text">{{widgets.widget9.totalSpent.title}}</div>
                                            <div class="pt-8 mat-display-1 m-0 font-weight-300 text-nowrap">
                                                <span class="secondary-text">$</span>
                                                <span>{{widgets.widget9.totalSpent.count[widget9.currentRange]}}</span>
                                            </div>
                                        </div>
                                        <div class="h-52" fxFlex>
                                            <ngx-charts-area-chart
                                                *fuseIfOnDom
                                                [results]="widgets.widget9.totalSpent.chart[widget9.currentRange]"
                                                [scheme]="widget9.scheme"
                                                [gradient]="widget9.gradient"
                                                [xAxis]="widget9.xAxis"
                                                [yAxis]="widget9.yAxis"
                                                [legend]="widget9.legend"
                                                [showXAxisLabel]="widget9.showXAxisLabel"
                                                [showYAxisLabel]="widget9.showYAxisLabel"
                                                [xAxisLabel]="widget9.xAxisLabel"
                                                [yAxisLabel]="widget9.yAxisLabel"
                                                [curve]="widget9.curve">
                                            </ngx-charts-area-chart>
                                        </div>
                                    </div>

                                    <div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
                                         fxLayoutAlign.gt-xs="space-between end">
                                        <div fxFlex="0 1 auto">
                                            <div class="h4 secondary-text">{{widgets.widget9.remaining.title}}</div>
                                            <div class="pt-8 mat-display-1 m-0 font-weight-300 text-nowrap">
                                                <span class="secondary-text">$</span>
                                                <span>{{widgets.widget9.remaining.count[widget9.currentRange]}}</span>
                                            </div>
                                        </div>
                                        <div class="h-52" fxFlex>
                                            <ngx-charts-area-chart
                                                *fuseIfOnDom
                                                [results]="widgets.widget9.remaining.chart[widget9.currentRange]"
                                                [scheme]="widget9.scheme"
                                                [gradient]="widget9.gradient"
                                                [xAxis]="widget9.xAxis"
                                                [yAxis]="widget9.yAxis"
                                                [legend]="widget9.legend"
                                                [showXAxisLabel]="widget9.showXAxisLabel"
                                                [showYAxisLabel]="widget9.showYAxisLabel"
                                                [xAxisLabel]="widget9.xAxisLabel"
                                                [yAxisLabel]="widget9.yAxisLabel"
                                                [curve]="widget9.curve">
                                            </ngx-charts-area-chart>
                                        </div>
                                    </div>

                                    <div class="p-16 border-top">
                                        <div class="h4 secondary-text">{{widgets.widget9.totalBudget.title}}</div>
                                        <div class="pt-8 mat-display-1 m-0 font-weight-300">
                                            <span class="secondary-text">$</span>
                                            <span>{{widgets.widget9.totalBudget.count}}</span>
                                        </div>
                                    </div>

                                </div>
                                <!-- / Front -->

                            </fuse-widget>
                            <!-- / WIDGET 9 -->

                            <!-- WIDGET 10 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">

                                    <div class="simple-table-container" ms-responsive-table>
                                        <div class=" table-title">
                                            {{widgets.widget10.title}}
                                        </div>

                                        <table class="simple">

                                            <thead>
                                                <tr>
                                                    <th *ngFor="let column of widgets.widget10.table.columns">
                                                        {{column.title}}
                                                    </th>
                                                </tr>
                                            </thead>

                                            <tbody>
                                                <tr *ngFor="let row of widgets.widget10.table.rows">
                                                    <td *ngFor="let cell of row">
                                                        <span class="p-4" [class]="cell.classes">
                                                            {{cell.value}}
                                                        </span>
                                                        <md-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</md-icon>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                                <!-- / Front -->

                            </fuse-widget>
                            <!-- / WIDGET 10 -->

                        </div>
                        <!-- / WIDGET GROUP -->

                    </md-tab>

                    <md-tab label="Team Members">

                        <!-- WIDGET GROUP -->
                        <div class="widget-group" fxLayout="row" fxFlex="100" fxLayoutWrap *fuseIfOnDom [@animateStagger]="{value:'50'}">

                            <!-- WIDGET 11 -->
                            <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="row" fxFlex="100">

                                <!-- Front -->
                                <div class="fuse-widget-front md-white-bg mat-elevation-z2">

                                    <div class="p-24 mb-8 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
                                        <div class="h2">{{widgets.widget11.title}}</div>
                                        <div class="text-boxed red-bg white-fg m-0">{{widgets.widget11.table.rows.length}}
                                            members
                                        </div>
                                    </div>

                                    <md-table #table [dataSource]="widget11.dataSource">

                                        <!-- Avatar Column -->
                                        <ng-container cdkColumnDef="avatar">
                                            <md-header-cell fxFlex="64px" *cdkHeaderCellDef></md-header-cell>
                                            <md-cell fxFlex="64px" *cdkCellDef="let contact">
                                                <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                                                     [src]="contact.avatar"/>
                                            </md-cell>
                                        </ng-container>

                                        <!-- Name Column -->
                                        <ng-container cdkColumnDef="name">
                                            <md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
                                            <md-cell *cdkCellDef="let contact">
                                                <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
                                            </md-cell>
                                        </ng-container>

                                        <!-- Position Column -->
                                        <ng-container cdkColumnDef="position">
                                            <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position</md-header-cell>
                                            <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
                                                <p class="position text-truncate">
                                                    {{contact.position}}
                                                </p>
                                            </md-cell>
                                        </ng-container>

                                        <!-- Office Column -->
                                        <ng-container cdkColumnDef="office">
                                            <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office</md-header-cell>
                                            <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
                                                <p class="office text-truncate">
                                                    {{contact.office}}
                                                </p>
                                            </md-cell>
                                        </ng-container>


                                        <!-- Email Column -->
                                        <ng-container cdkColumnDef="email">
                                            <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</md-header-cell>
                                            <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
                                                <p class="email text-truncate">
                                                    {{contact.email}}
                                                </p>
                                            </md-cell>
                                        </ng-container>

                                        <!-- Phone Column -->
                                        <ng-container cdkColumnDef="phone">
                                            <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</md-header-cell>
                                            <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
                                                <p class="phone text-truncate">
                                                    {{contact.phone}}
                                                </p>
                                            </md-cell>
                                        </ng-container>

                                        <md-header-row *cdkHeaderRowDef="widgets.widget11.table.columns"></md-header-row>
                                        <md-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;">
                                        </md-row>
                                    </md-table>
                                </div>
                                <!-- / Front -->

                            </fuse-widget>
                            <!-- / WIDGET 11 -->

                        </div>
                        <!-- / WIDGET GROUP -->

                    </md-tab>
                </md-tab-group>

            </div>
            <!-- / CONTENT -->

        </div>
        <!-- / CENTER -->

        <!-- SIDENAV -->
        <md-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" opened="true" fuseMdSidenavHelper="dashboards-right-sidenav" md-is-locked-open="gt-md">

            <div class="sidenav-content" fusePerfectScrollbar>

                <!-- WIDGET GROUP -->
                <div class="widget-group" fxLayout="column" fxFlex="100" *fuseIfOnDom [@animateStagger]="{value:'50'}">

                    <!-- NOW WIDGET -->
                    <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">

                        <!-- Front -->
                        <div class="fuse-widget-front">

                            <div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">

                                <div class="h3">{{dateNow | date: 'EEEE, h:m:ss'}}</div>

                                <div>
                                    <button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
                                        <md-icon>more_vert</md-icon>
                                    </button>

                                    <md-menu #moreMenu="mdMenu">
                                        <button md-menu-item aria-label="Flip widget">
                                            Details
                                        </button>
                                    </md-menu>
                                </div>
                            </div>

                            <div class="p-16 pb-24" fxLayout="column" fxLayoutAlign="center center">
                                <div class="h1 secondary-text">
                                    <span>{{dateNow | date: 'MMMM'}}</span>
                                </div>

                                <div class="font-size-72 line-height-88 secondary-text font-weight-400">
                                    {{dateNow | date: 'd'}}
                                </div>

                                <div class="h1 secondary-text">
                                    <span>{{dateNow | date: 'y'}}</span>
                                </div>
                            </div>

                            <md-divider></md-divider>
                        </div>
                        <!-- / Front -->

                    </fuse-widget>
                    <!-- / NOW WIDGET -->

                    <!-- WEATHER WIDGET -->
                    <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">

                        <!-- Front -->
                        <div class="fuse-widget-front">

                            <div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">

                                <div class="h4" fxLayout="row" fxLayoutAlign="start center">
                                    <md-icon class="mr-8">place</md-icon>
                                    {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
                                </div>

                                <div>
                                    <button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="more">
                                        <md-icon>more_vert</md-icon>
                                    </button>

                                    <md-menu #moreMenu="mdMenu">
                                        <button md-menu-item aria-label="Flip widget">
                                            Details
                                        </button>
                                    </md-menu>
                                </div>
                            </div>

                            <div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">

                                <div fxLayout="row" fxLayoutAlign="center center">
                                    <md-icon fontSet="meteocons" [fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
                                             class="icon s-40 mr-16"></md-icon>
                                    <span class="mat-display-2 m-0 font-weight-300 secondary-text">
                                        {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
                                    </span>
                                    <span class="font-size-48 font-weight-300 hint-text text-super ml-8">°</span>
                                    <span class="mat-display-2 mb-0 font-weight-300 hint-text ng-binding">C</span>
                                </div>
                            </div>

                            <div class="grey-300-bg p-16" fxLayout="row" fxLayoutAlign="space-between center">
                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <md-icon fontSet="meteocons" fontIcon="icon-windy" class="mr-8 s-16"></md-icon>
                                    <span>
                                        {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
                                    </span>
                                    <span class="secondary-text ml-5">{{widgets.weatherWidget.speedUnit}}</span>
                                </div>

                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <md-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></md-icon>
                                    <span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}</span>
                                </div>

                                <div fxLayout="row" fxLayoutAlign="start center">
                                    <md-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></md-icon>
                                    <span>{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}</span>
                                </div>
                            </div>

                            <div class="py-16">
                                <div class="py-16 px-24" fxLayout="row" fxLayoutAlign="space-between center"
                                     *ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
                                    <span class="h4">{{day.name}}</span>
                                    <div fxLayout="row" fxLayoutAlign="start center">
                                        <md-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></md-icon>
                                        <span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
                                        <span class="h2 font-weight-300 secondary-text text-super">&deg;</span>
                                        <span class="h2 font-weight-300 secondary-text">{{widgets.weatherWidget.tempUnit}}</span>
                                    </div>
                                </div>
                            </div>

                            <md-divider></md-divider>

                        </div>
                        <!-- / Front -->

                    </fuse-widget>
                    <!-- / WEATHER WIDGET -->

                </div>
                <!-- / WIDGET GROUP -->
            </div>

        </md-sidenav>
        <!-- / SIDENAV -->

    </md-sidenav-container>

</div>
