<md-list class="date">

    <h3 md-subheader>
        <span>Today</span>
    </h3>

    <div class="secondary-text mat-display-1 mb-0 p-16">
        <div class="mb-12">
            {{date | date:'EEEE'}}
        </div>
        <div fxLayout="row" fxLayoutAlign="start start">
            <span> {{date | date:'d'}}</span>
            <span class="mat-subheading-1">th</span>
            <span> {{date | date:'MMMM'}}</span>
        </div>
    </div>
</md-list>

<md-divider></md-divider>

<md-list>
    <h3 md-subheader>
        <span>Events</span>
    </h3>

    <md-list-item *ngFor="let event of events">
        <h3 md-line>{{event.title}}</h3>
        <p md-line class="secondary-text">{{event.detail}}</p>
    </md-list-item>
</md-list>

<md-divider></md-divider>

<md-list>
    <h3 md-subheader>
        <span>Notes</span>
    </h3>

    <md-list-item *ngFor="let note of notes">
        <h3 md-line>{{note.title}}</h3>
        <p md-line class="secondary-text">{{note.detail}}</p>
    </md-list-item>
</md-list>

<md-divider></md-divider>

<md-list>
    <h3 md-subheader>
        <span>Quick Settings</span>
    </h3>

    <md-list-item>
        <md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications" labelPosition="before">
            <h3>Notifications</h3>
        </md-slide-toggle>
    </md-list-item>

    <md-list-item>
        <md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud" labelPosition="before">
            <h3>Cloud Sync</h3>
        </md-slide-toggle>
    </md-list-item>

    <md-list-item>
        <md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters" labelPosition="before">
            <h3>Retro Thrusters</h3>
        </md-slide-toggle>
    </md-list-item>
</md-list>
