<div class="d-flex mailbox-header-bar p-3 bg-white align-items-center border-top">
    <div class="custom-control custom-checkbox">
        <input id="toggle-all" class="custom-control-input" type="checkbox" [(ngModel)]="isAllSelected"
            (click)="toggleAll()">
        <label for="toggle-all" class="custom-control-label">Check all</label>
    </div>

    <div class="ml-auto">
        <input class="form-control form-control-sm" id="table-search-input" [(ngModel)]="searchText" type="text"
            placeholder="Search mail...">
    </div>
</div>
<div class="table-responsive">
    <table class="table table-hover no-wrap bg-white">
        <tbody>
            <tr *ngFor="let mail of mails | async | MailSearch : searchText"
                [ngClass]="{'unread': mail.unread, 'selected': mail.selected}">
                <td class="mail-checkbox pl-3 width-50">
                    <div class="custom-control custom-checkbox mycustomcheckbox">
                        <input id="checkbox{{mail.id}}" class="custom-control-input" type="checkbox"
                            [(ngModel)]="mail.selected" (ngModelChange)="toggleOne()">
                        <label attr.for="checkbox{{mail.id}}" class="custom-control-label"></label>
                    </div>
                </td>
                <td class="mail-star width-50" *ngIf="router.url != '/pages/mail/mail-list/trash'">
                    <i class="fa " [ngClass]="{'fa-star': mail.starred, 'fa-star-o': !mail.starred}"
                        (click)="changeStarStatus(mail)"></i>
                </td>
                <td (click)="goToDetail(mail)" class="sender">{{ mail.sender }}</td>
                <td (click)="goToDetail(mail)" class="subject" [innerHTML]="mail.subject"></td>
                <td (click)="goToDetail(mail)" class="attachment"><i *ngIf="mail.attachment"
                        class="fa fa-paperclip"></i></td>
                <td (click)="goToDetail(mail)" class="date">{{mail.date}}</td>
            </tr>
        </tbody>
    </table>
</div>