<!-- SIDENAV HEADER -->
<div class="header md-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
    <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
        <md-icon class="logo-icon s-32 white-fg">mail</md-icon>
        <span class="logo-text">Mailbox</span>
    </div>

    <div class="account" fxLayout="column">
        <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" perfect-scrollbar>

    <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 -->