<div class="inner">
    <div class="task-list">
        <div class="task-list-tree-panel">
            <div class="task-list-filter">
                <ul>
                    <li>Фильтры</li>
                    <li>
                        <label>
                            <input type="radio" name="task-filter" value="All" [(ngModel)]="showMode" (ngModelChange)="filterVisibleTasks()">
                            <span>Все [{{tasks.length}}]</span>
                          </label></li>
                    <li class="ontime">
                        <label>
                            <input type="radio" name="task-filter" value="OnTime" [(ngModel)]="showMode" (ngModelChange)="filterVisibleTasks()">
                            <span><div></div>Без превышения срока [{{onTimeTasks.length}}]</span>
                        </label></li>
                    <li class="overdue">
                        <label>
                            <input type="radio" name="task-filter" value="Overdue" [(ngModel)]="showMode" (ngModelChange)="filterVisibleTasks()">
                            <span><div></div>С превышением срока [{{overdueTasks.length}}]</span>
                        </label></li>
                </ul>
            </div>
        </div>
        <div class="task-list-workplace">
            <div class="alert alert-danger" [hidden]="!errorMessage">{{errorMessage}}</div>
            <div class="table task-tbl">
                <div class="thead">
                    <div class="tr">
                        <div class="th">Процесс</div>
                        <div class="th">Версия</div>
                        <div class="th">Задача</div>
                        <div class="th">Дата создания</div>
                        <div class="th">Срок</div>
                    </div>
                </div>
                <div *ngFor="let task of visibleTasks"
                     class="tr" [ngClass]="{'task-overdue': isOverdue(task), 'task-ontime': isOnTime(task)}"
                     (click)="startTask(task)">
                    <div class="td">{{ task.processName }}</div>
                    <div class="td">{{ task.processVersion }}</div>
                    <div class="td task">{{ task.name }}</div>
                    <div class="td">{{ task.createdOn | date:'dd.MM.yyyy HH:mm:ss' }}</div>
                    <div class="td">{{ task.expirationTime | date:'dd.MM.yyyy HH:mm:ss' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>