<md-table #table [dataSource]="dataSource"
          [@animateStagger]="{value:'50'}">
    <!-- Checkbox Column -->
    <ng-container cdkColumnDef="checkbox">
        <md-header-cell *cdkHeaderCellDef></md-header-cell>
        <md-cell *cdkCellDef="let contact">
            <md-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
                         (click)="$event.stopPropagation()">
            </md-checkbox>
        </md-cell>
    </ng-container>

    <!-- Avatar Column -->
    <ng-container cdkColumnDef="avatar">
        <md-header-cell *cdkHeaderCellDef></md-header-cell>
        <md-cell *cdkCellDef="let contact">
            <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                 [src]="contact.avatar"/>
        </md-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="name">
        <md-header-cell *cdkHeaderCellDef>Name</md-header-cell>
        <md-cell *cdkCellDef="let contact">
            <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
        </md-cell>
    </ng-container>

    <!-- Email Column -->
    <ng-container cdkColumnDef="email">
        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</md-header-cell>
        <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
            <p class="email text-truncate">
                {{contact.email}}
            </p>
        </md-cell>
    </ng-container>

    <!-- Phone Column -->
    <ng-container cdkColumnDef="phone">
        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</md-header-cell>
        <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
            <p class="phone text-truncate">
                {{contact.phone}}
            </p>
        </md-cell>
    </ng-container>

    <!-- Job Title Column -->
    <ng-container cdkColumnDef="jobTitle">
        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Job title</md-header-cell>
        <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
            <p class="job-title text-truncate">
                {{contact.jobTitle}}
            </p>
        </md-cell>
    </ng-container>

    <!-- Company Column -->
    <ng-container cdkColumnDef="company">
        <md-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Company</md-header-cell>
        <md-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
            <p class="company text-truncate">
                {{contact.company}}
            </p>
        </md-cell>
    </ng-container>

    <!-- Buttons Column -->
    <ng-container cdkColumnDef="buttons">
        <md-header-cell *cdkHeaderCellDef></md-header-cell>
        <md-cell *cdkCellDef="let contact">
            <div fxFlex="row" fxLayoutAlign="end center">
                <button md-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
                    <md-icon *ngIf="user.starred.includes(contact.id)">star</md-icon>
                    <md-icon *ngIf="!user.starred.includes(contact.id)">star_outline</md-icon>
                </button>

                <button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="More"
                        (click)="$event.stopPropagation();">
                    <md-icon>more_vert</md-icon>
                </button>

                <md-menu #moreMenu="mdMenu">
                    <button md-menu-item aria-label="remove" (click)="deleteContact(contact)">
                        <md-icon>delete</md-icon>
                        <span>Remove</span>
                    </button>
                </md-menu>
            </div>

        </md-cell>
    </ng-container>

    <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *cdkRowDef="let contact; columns: displayedColumns;"
            class="contact"
            (click)="editContact(contact)"
            [ngClass]="{'md-light-blue-50-bg':checkboxes[contact.id]}"
            md-ripple
            [@animate]="{value:'*',params:{y:'100%'}}">
    </md-row>
</md-table>


<!-- ADD CONTACT BUTTON -->
<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
        *fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
    <md-icon>person_add</md-icon>
</button>
<!-- / ADD CONTACT BUTTON -->
