<div fxLayout="row" fxLayoutAlign="start center">

    <md-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()" (click)="$event.stopPropagation();"></md-checkbox>

    <div class="info" fxFlex FlexLayout="column">

        <div class="name" fxLayout="row" fxLayoutAlign="start center">

            <img class="avatar" *ngIf="mail.from?.avatar" alt="{{mail.from?.name}}" src="{{mail.from?.avatar}}"/>

            <div class="avatar" *ngIf="!mail.from?.avatar">{{mail.from?.name[0]}}</div>

            <span class="text-truncate" *ngIf="mail?.from">{{mail.from?.name}}</span>

            <md-icon *ngIf="mail.hasAttachments">attachment</md-icon>
        </div>

        <div class="subject text-truncate">
            {{mail.subject}}
        </div>

        <div class="message text-truncate" *ngIf="mail?.message">

            {{mail.message | htmlToPlaintext | slice:0:180}}{{mail.message.length > 180 ? '...' : ''}}

            <div class="labels">
                <div class="label" *ngFor="let labelId of mail.labels"
                     [ngStyle]="{background: labels | getById:labelId:'color'}">{{labels | getById:labelId:'title'}}
                </div>
            </div>
        </div>

    </div>

    <div fxLayout="column" fxLayoutAlign="space-between end">

        <div class="time">{{mail.time}}</div>

        <div class="actions" fxLayout="row" fxLayoutAlign="start center">
            <button md-button class="mat-icon-button" (click)="toggleStar($event)" aria-label="Toggle star">
                <md-icon *ngIf="mail.starred">star</md-icon>
                <md-icon *ngIf="!mail.starred">star_outline</md-icon>
            </button>

            <button md-button class="mat-icon-button" (click)="toggleImportant($event)" aria-label="Toggle important">
                <md-icon *ngIf="mail.important">label</md-icon>
                <md-icon *ngIf="!mail.important">label_outline</md-icon>
            </button>
        </div>
    </div>
</div>
