
<div class="task-list">
    <div *ngIf="!(tasks$ | async)?.length" class="task-list__empty">
        <span>There are no tasks</span>
        <i nz-icon nzTheme="outline" nzType="smile"></i>
    </div>

    <div class="task-list__items">
        <div *ngFor="let task of tasks$ | async; odd as odd; even as even"
             (click)="handleTaskClick(task)"
             class="task-list__item"
             [class.task-list__item--even]="even"
             [class.task-list__item--odd]="odd"
             [class.task-list__item--danger]="!task.isCompleted() && task.isPriorityDanger()"
             [class.task-list__item--info]="!task.isCompleted() && task.isPriorityInfo()"
             [class.task-list__item--success]="!task.isCompleted() && task.isPrioritySuccess()"
             [class.task-list__item--warning]="!task.isCompleted() && task.isPriorityWarning()">
            
            <div class="task-list__item-icon">
                <svg *ngIf="task.isTask() && !task.isCompleted()"
                     height="1em" width="1em" viewBox="0 0 2048 2048">
                    <path d="M1920 128v1792H128V128h1792zm-128 128H256v1536h1536V256z"></path>
                </svg>
                <svg *ngIf="task.isTask() && task.isCompleted()"
                     height="1em" width="1em" viewBox="0 0 2048 2048">
                    <path d="M2048 0v2048H0V0h2048zm-128 128H128v1792h1792V128zM768 1627l-429-430 90-90 339 338 851-850 90 90-941 942z"></path>
                </svg>
                <i *ngIf="task.isMessage() && !task.isCompleted()"
                   nz-icon nzTheme="outline" nzType="comment"></i>
            </div>

            <div class="task-list__item-content">
                <div class="task-list__item-content-main">
                    <div class="task-list__item-title">{{task.title}}</div>
                    <div class="task-list__item-description">{{task.description}}</div>
                </div>
                
                <div class="task-list__item-content-side">
                    <svg *ngIf="hasRoute(task)"
                         class="task-list__item-more"
                         height="1em" width="1em" viewBox="0 0 1024 1024">
                        <path d="M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1z"></path>
                    </svg>
                    <div class="task-list__item-time">
                        {{getTimePast(task)}} ago {{formatDateTime(task)}}
                    </div>
                </div>
            </div>

            <div *ngIf="!task.isActioned()" class="task-list__item-actions">
                <button *ngFor="let action of task.actions"
                        class="task-list__action-btn"
                        (click)="handleActionClick(task, action); $event.stopPropagation();">
                    {{action.title}}
                </button>
            </div>
        </div>
    </div>
</div>