<!-- 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">check_box</md-icon>
        <span class="logo-text">To-do</span>
    </div>

    <div class="account" fxLayout="column">
        <div class="title">John Doe</div>
        <md-select class="account-selection" placeholder="Todo 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="p-24" fxFlexAlign="row" fxLayoutAlign="center center">
        <button md-raised-button
                class="mat-accent add-todo-button"
                (click)="newTodo()"
                aria-label="ADD TASK">
            ADD TASK
        </button>
    </div>

    <div class="nav">

        <div class="nav-item">
            <a class="nav-link" md-ripple [routerLink]="'/apps/todo/all'" routerLinkActive="active">
                <md-icon class="nav-link-icon">view_headline</md-icon>
                <span>All</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/todo/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">TAGS</div>

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

    </div>

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