<admin-page-header [title]="'Employee Activity'"></admin-page-header>

<!-- Row-->
<div class="row">
    <div class="col-xl-9 col-md-12 col-lg-8 loaddata">
        <!-- @if ( allNotificationList?.length) { -->
            @for (allList of allNotificationList; track allList; let index = $index) {
                @if(shouldShowDateBadge(allList.created_date)){
                    <div class="badge badge-light-1 p-2 px-3 fs-16 ms-0 mt-0 mb-3">
                        @if(allList.created_date == today){
                        {{ 'Today' | translate }}
                        }
                        @else if(allList.created_date == yesterday){
                        {{ 'Yesterday' | translate }}
                        }
                        @else if(allList.created_date != today && allList.created_date != yesterday){
                        {{ allList.created_date | date: setting?.date_format : authtimezone }}
                        }
                    </div>
                }
                @if (allList) {
                    <div class="card mb-3 border-0" [ngClass]="allList?.read_at ? 'notify-read' : ''">
                        <div class="d-flex p-3">
                            <div class="d-flex align-items-top">
                                <img [src]="allList?.user?.profileimage" class="avatar-lg rounded-circle me-3 my-auto" alt="avatar" />

                                <div>
                                    <div class="d-flex gap-3 mb-1">
                                        <a href="javascript:;" class="font-weight-semibold">{{allList?.user?.name}}</a>
                                        <span class="">{{ allList?.created_at | date : setting?.time_format : timezone }}</span>
                                        <span class="text-muted">{{ allList?.created_at | date: setting?.date_format : timezone }}</span>
                                        <a href="javascript:;" class="text-primary ">{{allList?.ip_address}}</a>
                                        @if(allList?.browser){
                                        <span class="text-muted ms-2">{{allList?.browser | translate}}</span>
                                        }
                                        @if(allList?.device){
                                        <span class="text-muted ms-2">{{allList?.device | translate}}</span>
                                        }
                                    </div>
                                    <div class="d-flex gap-2">
                                        <span class="font-weight-bold text-dark">{{allList?.activity_type}}</span>
                                        @if(allList?.ticket_id){
                                        <span class="font-weight-semibold text-primary">{{'SPG-'.allList?.ticket_id}}</span>
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            }
            @empty {
                @if(!isLoading){
                    <p>{{"No Data Found" | translate}}</p>
                }
            }
        <!-- } -->

    <div #commentsClose>
        @if (isLoadingComments) {
        <i class="fe fe-loader"></i>
        }
      </div>
    </div>
    
    <div class="col-xl-3 col-md-12 col-lg-4 mt-5 mt-lg-0">
        <div class="card">
            <div class="card-header border-0">
                <h4 class="card-title">{{'Filter Notifications' | translate}}</h4>
            </div>
            <form id="notifysearch">
                <div class="card-body pb-0">
                    <div class="form-group">
                        <input type="search" class="form-control notifysearch" name="notifysearch"
                            placeholder="Search here ...">
                        <i class="fe fe-search search-element"></i>
                    </div>
                </div>
            </form>
            <form>
                <div class="card-body">
                    <input class="form-control notifydate" type="text" mwlFlatpickr placeholder="Select Date" />
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End Row-->