
<div class="activity-list">
    <div *ngIf="!(activities$ | async)?.length" class="activity-list__empty">
        <span>There is no recent activity.</span>
    </div>

    <div class="activity-list__items">
        <div
            *ngFor="
                let activity of activities$ | async;
                odd as odd;
                even as even
            "
            (click)="handleActivityClick(activity)"
            class="activity-list__item"
            [class.activity-list__item--even]="even"
            [class.activity-list__item--odd]="odd"
        >
            <div class="activity-list__item-content">
                <div class="activity-list__item-content-main">
                    <div class="activity-list__item-title">
                        {{ activity.title }}
                    </div>
                    <div class="activity-list__item-description">
                        {{ activity.description }}
                    </div>
                </div>
                
                <div class="activity-list__item-content-side">
                    <svg *ngIf="hasRoute(activity)" 
                         class="activity-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="activity-list__item-time">
                        {{ getTimePast(activity) }}
                        ago {{ formatDateTime(activity) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>