@if (_activityLogList) {
    <div class="activity-log-container">
        <div class="title-type-container d-flex justify-content-between">
            <p class="title-type ca-font-extra-bold d-flex align-items-center">
                {{ _selectedTab | tabTitleTransform }}
            </p>
            @if (showSearch) {
                <p
                    class="activity-log-results ca-font-bold d-flex align-items-center"
                >
                    {{ _activityLogList.length }} Results
                </p>
            } @else {
                <div class="activity-log-search-btn">
                    <svg-icon
                        class="svg-size-28"
                        [src]="searchButtonSvg"
                        (click)="openSearchInput()"
                    ></svg-icon>
                </div>
            }
        </div>
        @if (showSearch) {
            <div class="search-container" [formGroup]="searchForm">
                <app-ca-input
                    class="input-form-holder"
                    formControlName="search"
                    [inputConfig]="activityLogSearchConfig"
                ></app-ca-input>
            </div>
        }
        <div class="activity-log-list-container">
            @if (_activityLogList.length) {
                <div class="activity-log-list">
                    @for (
                        activityLogItem of _activityLogList;
                        let indx = $index;
                        track activityLogItem.id
                    ) {
                        <ng-container
                            *ngTemplateOutlet="
                                activityLogItemTemplate;
                                context: {
                                    activityLogItem,
                                }
                            "
                        ></ng-container>
                    }
                </div>
            } @else {
                <div class="no-data-container-box d-flex flex-column">
                    <div class="subtle-illustration-container"></div>
                    <div
                        class="no-data-container d-flex flex-column justify-content-center align-items-center"
                    >
                        <h1 class="no-data-title ca-font-extra-bold">
                            No results
                        </h1>
                        <p class="no-data-text ca-font-medium">
                            No entries match your criteria.<br />
                            Please revise your filters and search again.
                        </p>
                        <div
                            class="no-data-button button-secondary"
                            (click)="resetFiltersClick()"
                        >
                            <p
                                class="button-text ca-font-bold d-flex align-items-center justify-content-center"
                            >
                                Reset Filters
                            </p>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>

    <ng-template #activityLogItemTemplate let-activityLogItem="activityLogItem">
        <div class="activity-log-item-container">
            @if (activityLogItem.isFirstInDay) {
                <p class="title-text ca-font-medium">
                    <span>{{
                        activityLogItem
                            | activityLogDateTransform
                            | date: 'dd/MM/yyyy'
                    }}</span>
                </p>
            } @else {
                @if (activityLogItem.id !== hoveredItemId) {
                    <div class="horizontal-line"></div>
                }
            }

            <div
                class="activity-log-item"
                [ngClass]="{
                    'm-t-8': activityLogItem.isFirstInDay,
                    'activity-hovered':
                        activityLogItem.id === hoveredItemId &&
                        !activityLogItem.isFirstInDay,
                    'activity-focused': activityLogItem.id === focusedItemId,
                }"
                (mouseover)="hoverItem(activityLogItem)"
                (mouseleave)="leaveItem()"
                (click)="activityLogItemFocus(activityLogItem.id)"
            >
                <div
                    class="activity-log-item-header d-flex justify-content-center align-items-center"
                >
                    <div
                        class="action-log-title d-flex align-items-center"
                        [class]="
                            'action-log-title-' +
                            activityLogItem.actionLog.name.toLowerCase()
                        "
                        [ngClass]="{
                            'action-log-title-hovered':
                                activityLogItem.id === hoveredItemId ||
                                activityLogItem.id === focusedItemId,
                        }"
                    >
                        <svg-icon
                            [src]="
                                activityLogItem.entityTypeActivity.name.toLowerCase()
                                    | caSvg: 'common'
                            "
                            class="type-icon d-flex align-items-center svg-size-18"
                        ></svg-icon>
                        <p class="title-type-icon-text ca-font-bold">
                            {{
                                activityLogItem.actionLog.name
                                    | actionLogNameTransform
                                    | uppercase
                            }}
                        </p>
                    </div>
                    @if (
                        activityLogItem.id === hoveredItemId ||
                        activityLogItem.id === focusedItemId
                    ) {
                        <div>
                            <p
                                class="activity-log-date ca-font-medium d-flex align-items-center"
                            >
                                {{
                                    activityLogItem
                                        | activityLogDateTransform
                                        | date: 'hh:mm a'
                                }}
                            </p>
                        </div>
                    }

                    <div class="activity-log-date-container d-flex">
                        @if (
                            activityLogItem.id === hoveredItemId ||
                            activityLogItem.id === focusedItemId
                        ) {
                            <p class="hovered-user-name ca-font-bold">
                                {{ hoveredUserName }}
                            </p>
                        } @else {
                            <p
                                class="activity-log-date ca-font-medium d-flex align-items-center"
                            >
                                {{
                                    activityLogItem
                                        | activityLogDateTransform
                                        | date: 'HH:mm a'
                                }}
                            </p>
                        }

                        @if (_selectedTab === RightSidePanelCurrentTab.ALL) {
                            <div class="d-flex align-items-center">
                                @if (activityLogItem.companyUser.avatarFile) {
                                    <app-ca-profile-image
                                        [indx]="activityLogItem.companyUser.id"
                                        [avatarImg]="
                                            activityLogItem.companyUser
                                                .avatarFile.url
                                        "
                                        [size]="14"
                                    >
                                    </app-ca-profile-image>
                                } @else {
                                    <app-ca-profile-image
                                        [indx]="activityLogItem.companyUser.id"
                                        [textShortName]="
                                            activityLogItem.companyUser.fullName
                                                | companyUserNameTransform
                                        "
                                        [size]="14"
                                    >
                                    </app-ca-profile-image>
                                }
                            </div>
                        }
                    </div>
                </div>
                @if (activityLogItem.id === focusedItemId) {
                    <div class="activity-log-item-title-container-focused">
                        <p class="activity-log-item-title ca-font-semi-bold">
                            {{ activityLogItem.description.Title }}
                        </p>
                        <p class="activity-log-item-subtitle">
                            {{ activityLogItem.description.SubTitle }}
                        </p>
                    </div>
                } @else {
                    <div
                        class="activity-log-item-title-container d-flex align-items-center"
                    >
                        <p class="activity-log-item-title ca-font-semi-bold">
                            {{ activityLogItem.description.Title }}
                        </p>
                        <div class="vertical-line"></div>
                        <p class="activity-log-item-subtitle">
                            {{ activityLogItem.description.SubTitle }}
                        </p>
                    </div>
                }
            </div>
        </div>
    </ng-template>
}