{% load static %}

<div
    class="w-full  xxlg1:flex flex-col justify-center items-center gap-3 bg-white shadow-md rounded-md p-5 logged-in-container">
    <div class="w-full flex justify-center items-center">
        <p class="text-[20px] text-secondosiblue font-bold text-center">Recently Online</p>
    </div>


    <div class="w-full recentltLoggedStaffsContainer">
        <div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
            <button
                class="w-full rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton">Customers</button>
            <button class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 staffButton"
                style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Staffs</button>
        </div>
        <div class="w-full flex flex-col gap-3 mt-3">
            {% for staff_connection in staff_connections %}
            <div class="w-full flex justify-start items-center gap-2">
                <div class="relative">
                    <div class="w-[40px] h-[40px] rounded-full">
                        <img src="{{staff_connection.image}}"
                            class="w-full h-full object-cover rounded-full">
                    </div>
                </div>
                <div class="flex flex-col">
                    <p class="text-secondosiblue text-sm">{{staff_connection.first_name}}
                        {{staff_connection.last_name}}</p>
                    {% if staff_connection.online %}
                        <p class="text-green-700 text-xs">Online</p>
                    {% else %}
                        <p class="text-gray-500 text-xs">{{staff_connection.last_seen}}</p>
                    {% endif %}

                </div>
            </div>
            {% endfor %}
        </div>
    </div>


    <div class="w-full hidden recentltLoggedCustomersContainer">
        <div class="w-full rounded-md bg-gray-200 grid grid-cols-2 shadow-sm">
            <button class="w-full bg-white rounded-md text-secondosiblue text-sm cursor-pointer p-2 customerButton"
                style="box-shadow: 0 0 6px rgba(88, 88, 88, 0.043), 6px 0 6px rgba(88, 88, 88, 0.043), 0 6px 6px rgba(88, 88, 88, 0.043), -6px 0 6px rgba(88, 88, 88, 0.043);">Customers</button>
            <button class="w-full text-secondosiblue text-sm cursor-pointer p-2 staffButton">Staffs</button>
        </div>
        <div class="w-full mt-3 flex flex-col gap-3 recentltLoggedCustomers">
            {% for customer_connection in customer_connections %}
            <div class="w-full flex justify-start items-center gap-2">
                <div
                    class="w-[40px] h-[40px] bg-secondosiblue flex justify-center items-center rounded-full text-white">
                    <p>{{customer_connection.first_name|slice:":1"}}{{customer_connection.last_name|slice:":1"}}
                    </p>
                </div>
                <div class="flex flex-col">
                    <p class="text-secondosiblue text-sm">{{customer_connection.first_name}}
                        {{customer_connection.last_name}}</p>
                        {% if customer_connection.online %}
                            <p class="text-green-700 text-xs">Online</p>
                        {% else %}
                            <p class="text-gray-500 text-xs"> {{customer_connection.last_seen}}</p>
                        {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
