{% extends "finance/base.html" %}

{% block content %}

<style>
    /* ================================
       Online User List
       ================================ */

    .online-user-page {
        padding-top: 4px;
    }

    .online-user-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;
    }

    .online-user-title {
        font-size: 28px;
        font-weight: 500;
        margin: 0;
        color: #111827;
    }

    .online-count {
        background-color: #198754 !important;
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 6px;
    }

    .online-user-card {
        border: 1px solid #d9dde0;
        border-radius: 4px;
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .online-user-table {
        width: 100%;
        margin: 0;
        border-collapse: collapse;
        font-size: 16px;
    }

    .online-user-table thead th {
        background-color: #D9DDE0 !important;
        color: #202124 !important;
        font-weight: 600;
        font-size: 16px;
        padding: 10px 10px;
        border-bottom: 1px solid #c9ced2;
        white-space: nowrap;
    }

    .online-user-table tbody td {
        padding: 9px 10px;
        color: #202124;
        border-bottom: 1px solid #e1e4e7;
        vertical-align: middle;
        white-space: nowrap;
    }

    .online-user-table tbody tr:last-child td {
        border-bottom: none;
    }

    .online-user-table tbody tr:hover {
        background-color: #f7f8f9;
    }

    .online-user-table .user-name {
        font-weight: 600;
    }

    .online-status {
        display: inline-block;
        background-color: #198754;
        color: #ffffff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        padding: 6px 10px;
        border-radius: 6px;
        white-space: nowrap;
    }

    .online-empty {
        text-align: center;
        padding: 30px !important;
        color: #6c757d !important;
    }

    @media (max-width: 768px) {

        .online-user-title {
            font-size: 24px;
        }

        .online-user-table {
            font-size: 14px;
        }

        .online-user-table thead th {
            font-size: 14px;
        }
    }
</style>


<div class="container-fluid online-user-page">

    <div class="online-user-header">

        <h3 class="online-user-title">
            Online User List
        </h3>

        <span class="online-count">
            {{ online_users|length }} Online
        </span>

    </div>


    <div class="online-user-card">

        <div class="table-responsive">

            <table class="table online-user-table">

                <thead>
                    <tr>
                        <th style="width: 60px;">No</th>
                        <th>User</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Department</th>
                        <th>Position</th>
                        <th style="width: 100px;">Status</th>
                    </tr>
                </thead>


                <tbody>

                    {% for item in online_users %}

                    <tr>

                        <td>
                            {{ forloop.counter }}
                        </td>

                        <td class="user-name">
                            {{ item.user.full_name|default:item.django_user.first_name }}
                        </td>

                        <td>
                            {{ item.django_user.email }}
                        </td>

                        <td>
                            {{ item.user.role|default:"-" }}
                        </td>

                        <td>
                            {{ item.user.department|default:"-" }}
                        </td>

                        <td>
                            {{ item.user.position|default:"-" }}
                        </td>

                        <td>
                            <span class="online-status">
                                ● Online
                            </span>
                        </td>

                    </tr>

                    {% empty %}

                    <tr>
                        <td colspan="7" class="online-empty">
                            No users are currently online.
                        </td>
                    </tr>

                    {% endfor %}

                </tbody>

            </table>

        </div>

    </div>

</div>

{% endblock %}