<nz-card nzTitle="Manage Logged In Users">
    <div class="card-content">
        <div class="table-container">
            <nz-table
                #basicTable
                [nzData]="items$ | async"
                [nzFrontPagination]="false"
            >
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Display Name</th>
                        <th>Login Date</th>
                        <th>Vehicle</th>
                        <th>Device Type</th>
                        <th>Device Title</th>
                        <th>Last Online</th>
                        <th class="action-cell">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of basicTable.data">
                        <td>{{ item.userName }}</td>
                        <td>{{ item.userTitle }}</td>
                        <td>
                            {{ item.loginDate | date: "HH:mm dd-MMM-yyyy" }}
                        </td>
                        <td>{{ item.vehicle }}</td>
                        <td>{{ item.deviceType }}</td>
                        <td>{{ item.deviceDescription }}</td>
                        <td>
                            <span
                                *ngIf="item.deviceIsOnline"
                                class="online-status online"
                            >
                                Online Now
                            </span>
                            <span
                                *ngIf="
                                    !item.deviceIsOnline &&
                                    item.deviceLastOnline
                                "
                                class="online-status offline"
                            >
                                {{
                                    item.deviceLastOnline
                                        | date: "HH:mm dd-MMM-yyyy"
                                }}
                            </span>
                            <span
                                *ngIf="
                                    !item.deviceIsOnline &&
                                    !item.deviceLastOnline
                                "
                                class="online-status never"
                            >
                                Never Connected
                            </span>
                        </td>
                        <td class="action-cell">
                            <button
                                nz-button
                                nzType="primary"
                                nzDanger
                                nz-popconfirm
                                nzPopconfirmTitle="Are you sure you want to logout this user?"
                                nzOkText="Yes"
                                nzCancelText="No"
                                (nzOnConfirm)="logoutUser(item)"
                            >
                                <i nz-icon nzType="logout"></i>
                                Logout User
                            </button>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
</nz-card>
