<!-- SIDENAV HEADER -->
<div class="sidenav-header" *ngIf="contact">

    <!-- CONTACT TOOLBAR -->
    <md-toolbar>

        <!-- TOOLBAR TOP -->
        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">

            <div>Contact Info</div>

            <button md-button class="mat-icon-button" fuseMdSidenavToggler="chat-right-sidenav" aria-label="close">
                <md-icon>close</md-icon>
            </button>

        </div>
        <!-- / TOOLBAR TOP -->

        <!-- TOOLBAR BOTTOM -->
        <md-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">

            <img [src]="contact.avatar" class="avatar contact-avatar huge" alt="{{contact.name}}"/>

            <div class="contact-name my-8">{{contact.name}}</div>

        </md-toolbar-row>
        <!-- / TOOLBAR BOTTOM -->

    </md-toolbar>
    <!-- / CONTACT TOOLBAR -->
</div>

<!-- SIDENAV CONTENT -->
<div class="sidenav-content p-16" fusePerfectScrollbar fxFlex *ngIf="contact">

    <!-- CONTACT MOOD -->
    <md-card>

        <md-input-container fxFlex>
                <textarea mdInput placeholder="Mood" name="mood"
                          [value]="contact.mood" rows="3" disabled>
                </textarea>
        </md-input-container>

    </md-card>
    <!-- / CONTACT MOOD -->
</div>
