<!-- SIDENAV HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start"
     class="header p-24 md-accent-bg" class.gt-md="header p-24 white-fg">
    <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
        <md-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</md-icon>
        <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
    </div>

    <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
        <div class="title">John Doe</div>
        <md-select class="account-selection" placeholder="Mail Selection"
                   floatPlaceholder="never"
                   [ngModel]="selectedAccount">
            <md-option *ngFor="let account of (accounts | keys)" [value]="account.key">
                {{account.value}}
            </md-option>
        </md-select>
    </div>

</div>
<!-- / SIDENAV HEADER -->

<!-- SIDENAV CONTENT -->
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">

    <div class="p-24">
        <button md-raised-button fxFlex
                class="mat-accent compose-dialog-button"
                (click)="composeDialog()"
                aria-label="Compose">
            COMPOSE
        </button>
    </div>

    <div class="nav">

        <div class="nav-subheader">FOLDERS</div>

        <div class="nav-item" *ngFor="let folder of folders">
            <a class="nav-link" md-ripple [routerLink]="'/apps/mail/' + folder.handle" routerLinkActive="active">
                <md-icon class="nav-link-icon" *ngIf="folder.icon">{{folder.icon}}</md-icon>
                <span>{{folder.title}}</span>
            </a>
        </div>

        <div class="nav-subheader">FILTERS</div>

        <div class="nav-item" *ngFor="let filter of filters">
            <a class="nav-link" md-ripple [routerLink]="'/apps/mail/filter/' + filter.handle" routerLinkActive="active">
                <md-icon class="nav-link-icon" *ngIf="filter.icon">{{filter.icon}}</md-icon>
                <span>{{filter.title}}</span>
            </a>
        </div>

        <div class="nav-subheader">LABELS</div>

        <div class="nav-item" *ngFor="let label of labels">
            <a class="nav-link" md-ripple [routerLink]="'/apps/mail/label/' + label.handle" routerLinkActive="active">
                <md-icon class="nav-link-icon" [ngStyle]="{'color':label.color}">label</md-icon>
                <span>{{label.title}}</span>
            </a>
        </div>

    </div>

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