{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} Osina {% endblock %}</title>
    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DRAGGABLE SLIDER LINKS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>

<body class="bg-gray-200 font-poppinsLight relative">
    <!-- THE POPUP THAT APPEARS WHEN THE USER GOES OFFLINE -->
    {% if user_offline %}
    <div class="w-full h-full inset-0 fixed bg-black bg-opacity-70 flex justify-center items-center p-5 z-20">
        <div class="w-full s:w-[400px] bg-white shadow-md rounded-md flex flex-col justify-between">
            <div class="w-full py-9 px-5 flex justify-center items-center text-center">
                <p class="text-secondosiblue text-[18px]">You are Currently Offline</p>
            </div>

            <button id="goOnlineButton" data-url="{% url 'go_online' %}"
                class="w-full text-white bg-green-700 py-3 px-3 rounded-b-md hover:bg-opacity-60 duration-300 cursor-pointer">Go
                Online</button>
        </div>
    </div>
    {% endif %}

    <!-- USERS ACTIVITIES BUTTON ON MOBILE -->
    <a href="{% url 'recentactivitiespage' %}">
        <div class="w-[55px] h-[55px] bg-osiblue rounded-full fixed xxlg1:hidden bottom-3 right-3 p-2 flex justify-center items-center cursor-pointer z-20 usersActivityIcon">
            <img src="{% static 'images/icons/useractivity.png' %}" alt="Users">
        </div>
    </a>


    <!-- NOTES POPUP THAT APPEARS WHEN CLICKING ON A SPECIFIC NOTE -->
    <div id="notesModal"
        class="w-full h-full bg-black bg-opacity-40 z-20 fixed hidden justify-center items-center inset-0 p-5">
        <div class="w-full s:w-[500px] h-fit rounded-md p-5 cursor-pointer relative"
            style="background-color: {{note.color}}">
            <p class="text-base text-gray-500 p-5 rounded-md" id="noteContent">
            </p>

            <div class="bg-white rounded-full h-[30px] w-[30px] shadow-md absolute top-2 right-2 p-2 flex justify-center items-center cursor-pointer text-secondosiblue"
                onclick="closeModal()">
                <i class="fa fa-close"></i>
            </div>
        </div>
    </div>


    <div class="w-full flex">
        <!-- FIXED SIDE NAVBAR -->
        <div class="fixed h-screen w-[300px] bg-osiblue pt-9 flex flex-col justify-between flex-grow overflow-y-auto fixedSideHeader"
            id="fixedSideHeader">

            <div>
                <a href="{% url 'home' %}">
                    <div class="mb-10 w-full flex justify-center">
                        <img src="{% static 'images/osinaw.png' %}" class="w-[180px]">
                    </div>
                </a>

                <div class="w-full px-3 relative">
                    <input type="text"
                        class="w-full bg-transparent border border-white border-opacity-10 py-2 px-3 text-white outline-none rounded-md"
                        placeholder="Search...">
                    <div class="inset-y-0 absolute right-5 flex justify-center items-center text-white">
                        <i class="fa fa-search"></i>
                    </div>
                </div>

                <!-- Menu Items -->
                <div
                    class="w-full flex flex-col items-center px-5 h-[400px] xxlg1:h-[500px] overflow-hidden overflow-y-auto mt-5">

                    <!-- ACCOUNTS -->
                    {% if user.is_superuser %}
                    <div class="w-full menu-container">
                        <div
                            class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                            <div class="w-full flex justify-start items-center gap-3">
                                <img src="{% static 'images/icons/users.png' %}" class="w-[30px]">
                                <p class="text-white">Accounts</p>
                            </div>
                            <div>
                                <i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
                                <i class="angleUp fa fa-angle-up"
                                    style="font-size: 18px; color: white; display: none;"></i>
                            </div>
                        </div>

                        <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
                            <a href="{% url 'customers' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Customers</p>
                                </div>
                            </a>

                            <a href="{% url 'businesses' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Businesses</p>
                                </div>
                            </a>

                            <a href="{% url 'users' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Staffs</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    {% endif %}

                    <!-- MY WORK DROPDOWN -->
                    <div class="w-full menu-container">
                        <div
                            class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                            <div class="w-full flex justify-start items-center gap-3">
                                <img src="{% static 'images/icons/work.png' %}" class="w-[30px]">
                                <p class="text-white">My Work</p>
                            </div>
                            <div>
                                <i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
                                <i class="angleUp fa fa-angle-up"
                                    style="font-size: 18px; color: white; display: none;"></i>
                            </div>
                        </div>

                        <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
                            <a href="{% url 'my-projects' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Projects</p>
                                </div>
                            </a>

                            <a href="{% url 'my-tasks' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
                                    <p class="text-white">Tasks</p>
                                </div>
                            </a>

                            <a>
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
                                    <p class="text-white">Tickets</p>
                                </div>
                            </a>

                            <a href="{% url 'my-notes' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
                                    <p class="text-white">Notes</p>
                                </div>
                            </a>

                            <a href="{% url 'dailyreports' %}">
                                <div class="w-full flex justify-start items-center gap-3 text-white py-2">
                                    <p class="text-white">Daily Reports</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- SUPPORT DROPDOWN -->
                    <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                        <div class="w-full flex justify-start items-center gap-3">
                            <img src="{% static 'images/icons/support.png' %}" class="w-[30px]">
                            <p class="text-white">Support</p>
                        </div>
                        <div>
                            <i class="fa fa-angle-down" style="font-size: 20px; color: white;"></i>
                        </div>
                    </div>


                    <!-- BILLING DROPDOWN -->
                    {% if user.is_superuser %}
                    <div class="w-full">
                        <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                            <div class="w-full flex justify-start items-center gap-3">
                                <img src="{% static 'images/icons/billing.png' %}" class="w-[30px]">
                                <p class="text-white">Billing</p>
                            </div>
                            <div>
                                <i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
                                <i class="angleUp fa fa-angle-up"
                                    style="font-size: 18px; color: white; display: none;"></i>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <!-- UTILITIES DROPDOWN -->
                    <div class="w-full menu-container">
                        <div
                            class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                            <div class="w-full flex justify-start items-center gap-3">
                                <img src="{% static 'images/icons/utilities.png' %}" class="w-[30px]">
                                <p class="text-white">Utilities</p>
                            </div>
                            <div>
                                <i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
                                <i class="angleUp fa fa-angle-up"
                                    style="font-size: 18px; color: white; display: none;"></i>
                            </div>
                        </div>

                        <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
                            <a href="{% url 'projecttypes' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Project Types</p>
                                </div>
                            </a>


                            <a href="{% url 'staffpositions' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Staff Positions</p>
                                </div>
                            </a>

                            <a href="{% url 'businesstypes' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Business Types</p>
                                </div>
                            </a>

                            <a href="{% url 'references' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">References</p>
                                </div>
                            </a>

                            <a href="{% url 'tags' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Tags</p>
                                </div>
                            </a>

                            <a>
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Countries</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <a class="w-full">
                        <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
                            <img src="{% static 'images/icons/activity.png' %}" class="w-[30px]">
                            <p class="text-white">Activity</p>
                        </div>
                    </a>
                </div>
            </div>

            <!-- Footer -->
            <div
                class="w-full xlg1:w-[300px] h-fit bg-secondosiblue flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0 mt-[100px]">
                <div class="w-full flex flex-col justify-center gap-1 items-center">
                    <div class="flex justify-center items-center gap-1">
                        <img src="{% static 'images/banner-logo.png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
                        <p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
                    </div>
                    <p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
                </div>
            </div>
        </div>


        <!-- MOBILE FIXED SIDE BAR -->
        <div class="w-full h-[100vh] absolute bg-black bg-opacity-40 z-50 mt-[80px] mobileFixedSideHeader hidden">
            <div class="w-[70%] h-full bg-osiblue flex flex-col gap-3 relative">
                <div class="w-full">
                    <!-- USER PROFILE -->
                    <div class="w-full flex justify-start items-center gap-2 cursor-pointer border border-white border-opacity-10 py-2 px-3 duration-300 bg-secondosiblue"
                        id="mobileUserProfile">
                        <div>
                            <div class="w-[35px] h-[35px] rounded-full shadow-md">
                                <img src='{{request.user.staffprofile.image.url}}' alt="user-image"
                                    class="w-full h-full object-cover rounded-full">
                            </div>
                        </div>

                        <div class="w-full flex justify-between items-center gap-2 text-white py-3">
                            <p>{{request.user.first_name}} {{request.user.last_name}}</p>
                            <i class="fa fa-angle-down"></i>
                            <i class="fa fa-angle-up" style="display: none;"></i>
                        </div>
                    </div>

                    <!-- USER PROFILE DROPDOWN -->
                    <div class="w-full h-fit bg-secondosiblue px-5 flex flex-col hidden" id="mobileUserProfileDropdown">
                        <a href="{% url 'signout' %}" class="w-full">
                            <div class="w-full py-3 flex items-center gap-2 text-white text-[16px]">
                                <img src="{% static 'images/icons/logout.png' %}" class="w-[22px]">
                                <p>Logout</p>
                            </div>
                        </a>
                    </div>
                </div>


                <!-- MOBILE MENU ITEMS -->
                <div class="w-full flex flex-col items-center px-3 h-[400px] overflow-hidden overflow-y-auto">
                    <!-- CUSTOMERS -->
                    {% if user.is_superuser %}
                    <div class="w-full menu-container">
                        <div
                            class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                            <div class="w-full flex justify-start items-center gap-3">
                                <img src="{% static 'images/icons/users.png' %}" class="w-[28px]">
                                <p class="text-white">Accounts</p>
                            </div>
                            <div>
                                <i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
                                <i class="angleUp fa fa-angle-up"
                                    style="font-size: 18px; color: white; display: none;"></i>
                            </div>
                        </div>

                        <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
                            <a href="{% url 'customers' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Customers</p>
                                </div>
                            </a>

                            <a href="{% url 'businesses' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Businesses</p>
                                </div>
                            </a>

                            <a href="{% url 'users' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Staffs</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    {% endif %}

                    <!-- MY WORK DROPDOWN -->
                    <div class="w-full menu-container">
                        <div
                            class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                            <div class="w-full flex justify-start items-center gap-3">
                                <img src="{% static 'images/icons/work.png' %}" class="w-[28px]">
                                <p class="text-white">My Work</p>
                            </div>
                            <div>
                                <i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
                                <i class="angleUp fa fa-angle-up"
                                    style="font-size: 18px; color: white; display: none;"></i>
                            </div>
                        </div>

                        <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
                            <a href="{% url 'my-projects' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">My Projects</p>
                                </div>
                            </a>

                            <a href="{% url 'my-tasks' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
                                    <p class="text-white">My Tasks</p>
                                </div>
                            </a>

                            <a>
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
                                    <p class="text-white">My Tickets</p>
                                </div>
                            </a>

                            <a href="{% url 'my-notes' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2">
                                    <p class="text-white">My Notes</p>
                                </div>
                            </a>

                            <a href="{% url 'dailyreports' %}">
                                <div class="w-full flex justify-start items-center gap-3 text-white py-2">
                                    <p class="text-white">Daily Reports</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                        <div class="w-full flex justify-start items-center gap-3">
                            <img src="{% static 'images/icons/support.png' %}" class="w-[28px]">
                            <p class="text-white">Support</p>
                        </div>
                        <div>
                            <i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
                            <i class="angleUp fa fa-angle-up" style="font-size: 18px; color: white; display: none;"></i>
                        </div>
                    </div>

                    {% if user.is_superuser %}
                    <div class="w-full">
                        <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
                            <div class="w-full flex justify-start items-center gap-3">
                                <img src="{% static 'images/icons/billing.png' %}" class="w-[28px]">
                                <p class="text-white">Billing</p>
                            </div>
                            <div>
                                <i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
                                <i class="angleUp fa fa-angle-up"
                                    style="font-size: 18px; color: white; display: none;"></i>
                            </div>
                        </div>
                    </div>

                    {% endif %}

                    <!-- UTILITIES -->
                    <div class="w-full menu-container">
                        <div
                            class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                            <div class="w-full flex justify-start items-center gap-3">
                                <img src="{% static 'images/icons/utilities.png' %}" class="w-[28px]">
                                <p class="text-white">Utilities</p>
                            </div>
                            <div>
                                <i class="angleDown fa fa-angle-down" style="font-size: 18px; color: white;"></i>
                                <i class="angleUp fa fa-angle-up"
                                    style="font-size: 18px; color: white; display: none;"></i>
                            </div>
                        </div>

                        <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
                            <a href="{% url 'projecttypes' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Project Types</p>
                                </div>
                            </a>


                            <a href="{% url 'staffpositions' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Staff Positions</p>
                                </div>
                            </a>

                            <a href="{% url 'businesstypes' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Business Types</p>
                                </div>
                            </a>

                            <a href="{% url 'references' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">References</p>
                                </div>
                            </a>

                            <a href="{% url 'tags' %}">
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Tags</p>
                                </div>
                            </a>

                            <a>
                                <div
                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
                                    <p class="text-white">Countries</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <a class="w-full">
                        <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
                            <img src="{% static 'images/icons/activity.png' %}" class="w-[28px]">
                            <p class="text-white">Activity</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>


        <!-- SCROLL PART -->
        <div class="flex-1 ml-[300px] h-fit bg-gray-200" id="scrollPart">
            <!-- TOP HEADER -->
            <div
                class="w-full h-[100px] bg-white shadow-md px-5 s:px-9 py-5 flex justify-between items-center topHeader">
                <div class="w-fit flex justify-center items-center gap-10">
                    <div class="w-fit flex flex-col gap-2 cursor-pointer" id="burgerMenuButton">
                        <div class="burgerMenuLine w-[25px] h-[2px] bg-osiblue duration-300"></div>
                        <div class="burgerMenuLine w-[25px] h-[2px] bg-osiblue duration-300"></div>
                        <div class="burgerMenuLine w-[25px] h-[2px] bg-osiblue duration-300"></div>
                    </div>

                    <div class="hidden xxlg1:flex justify-start items-center gap-5">
                        <div id="statusContainer">
                            {% include 'recent-status.html' %}
                        </div>
                        <button
                            class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButton hover:bg-osiblue duration-300"
                            data-modal-url="{% url 'addstatusmodal' %}">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </div>

                <div class="relative">
                    <div class="w-fit flex justify-between items-center gap-2 cursor-pointer hover:bg-gray-50 rounded-md hover:p-2 duration-300"
                        id="userProfile">
                        <div>
                            <div class="w-[40px] s:w-[45px] h-[40px] s:h-[45px] rounded-full shadow-md">
                                <img src='{{request.user.staffprofile.image.url}}' alt="user-image"
                                    class="w-full h-full object-cover rounded-full">
                            </div>
                        </div>

                        <div class="flex justify-center items-center gap-2 text-gray-500">
                            <p>{{request.user.first_name}} {{request.user.last_name}}</p>
                            <i class="fa fa-angle-down" id="arrowDown"></i>
                            <i class="fa fa-angle-up" style="display: none;" id="arrowUp"></i>
                        </div>
                    </div>

                    <!-- USER PROFILE DROPDOWN -->
                    <div class="w-[250px] h-fit bg-osiblue bg-opacity-70 rounded-md shadow-md px-3 absolute right-0 mt-3 flex flex-col"
                        style="display: none;" id="userProfileDropdown">
                        <a href="{% url 'signout' %}" class="w-full">
                            <div
                                class="w-full py-3 flex items-center gap-2 text-white hover:text-osiblue duration-300 cursor-pointer">
                                <img src="{% static 'images/icons/logout.png' %}" class="w-[22px]">
                                <p>Logout</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>


            <!-- MOBILE TOP HEADER -->
            <div
                class="w-full h-[80px] bg-osiblue shadow-md px-5 s:px-9 py-5 flex xlg1:hidden justify-between items-center mobileTopHeader">
                <a href="{% url 'home' %}">
                    <img src="{% static 'images/osinaw.png' %}" class="w-[130px] h-auto">
                </a>

                <div class="w-fit flex flex-col gap-2 cursor-pointer" id="mobileBurgerMenuButton">
                    <div class="w-[25px] h-[2px] bg-white duration-300"></div>
                    <div class="w-[25px] h-[2px] bg-white duration-300"></div>
                    <div class="w-[25px] h-[2px] bg-white duration-300"></div>
                </div>

                <div class="w-fit cursor-pointer hidden" id="mobileCloseMenuButton">
                    <img src="{% static 'images/closeicon.png' %}" class="w-[25px]">
                </div>
            </div>

 
            <!-- MODULES SECTION -->
            <div class="w-full h-fit grid grid-cols-1 xxlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
                <div class="h-[150px] bg-white shadow-md rounded-md block xxlg1:hidden">
                    <div
                        class=" bg-osiblue rounded-t-md flex justify-between items-center text-white text-[22px] font-bold h-[50px]">
                        <div class="px-3">
                            <p>Recent Status</p>
                        </div>

                        <button
                            class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButtonMobile"
                            data-modal-url="{% url 'statusmobilemodal' %}">
                            <i class="fa fa-plus"></i>
                        </button>
                    </div>
                    <div id="statusContainer" class="w-full h-fit p-5">
                        {% include 'recent-status.html' %}
                    </div>
                </div>

                <div class="bg-white shadow-md rounded-md p-5">
                    <div class="w-full h-full flex flex-col justify-between items-center">
                        <div class="w-full flex justify-between items-center">
                            <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tasks</p>
                            <img src="{% static 'images/icons/tasks.png' %}" class="w-[50px]">
                        </div>
                        <div
                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
                            <p class="text-secondosiblue text-xl font-semibold">{{total_tasks}}</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white shadow-md rounded-md p-5">
                    <div class="w-full h-full flex flex-col justify-between items-center">
                        <div class="w-full flex justify-between items-center">
                            <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Projects</p>
                            <img src="{% static 'images/icons/projects.png' %}" class="w-[50px]">
                        </div>
                        <div
                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
                            <p class="text-secondosiblue text-xl font-semibold">2</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white shadow-md rounded-md p-5">
                    <div class="w-full h-full flex flex-col justify-between items-center">
                        <div class="w-full flex justify-between items-center">
                            <p class="text-[22px] text-secondosiblue font-poppinsBold uppercase">Tickets</p>
                            <img src="{% static 'images/icons/tickets.png' %}" class="w-[50px]">
                        </div>
                        <div
                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">
                            <p class="text-secondosiblue text-xl font-semibold">2</p>
                        </div>
                    </div>
                </div>
            </div>
      

            <!-- NOTES SECTION -->
            <div class="w-full px-5 s:px-9 pb-5">
                <div class="w-full h-fit bg-white shadow-md rounded-md p-5">
                    <div class="w-full flex flex-col s:flex-row justify-between gap-3 s:gap-0 items-center">
                        <div class="w-full s:w-fit flex justify-between items-center">
                            <div class="hidden md:block">
                                <p class="text-base text-gray-500">Recent Note:</p>
                                <div class="flex justify-start items-center gap-2">
                                    <div class="w-[13px] h-[13px] rounded-full"
                                        style="background-color: {{ recent_note.color }};">
                                    </div>
                                    <p class="text-slate-700 truncate max-w-xs l:max-w-xl">{{recent_note.text}}</p>
                                </div>
                            </div>

                            <div class="w-full flex justify-between items-center md:hidden">
                                <p class="text-base text-gray-500">My Notes</p>

                                <button
                                    class="w-[34px] h-[33px] rounded-md p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex s:hidden justify-center items-center shadow-md addNoteButton hover:bg-osiblue duration-300"
                                    data-modal-url="{% url 'addnotemodal' %}">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </div>
                        </div>

                        <div class="w-full s:w-fit hidden md:flex justify-start s:justify-end items-center gap-2">
                            <button
                                class="w-full s:w-fit rounded-md py-1 px-3 bg-osiblue border border-osiblue text-white hover:bg-white hover:text-osiblue cursor-pointer duration-300"
                                id="showNotesButton">Show
                                Notes</button>
                            <button
                                class="w-[34px] h-[33px] rounded-md p-2 bg-gray-300 text-white text-[16px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton hover:bg-osiblue duration-300"
                                data-modal-url="{% url 'addnotemodal' %}">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>

                    <!-- ALL NOTES CONTAINER (appears when clicking on the "Show notes" button) -->
                    <div class="w-full h-fit hidden mt-3 s:mt-5" id="notesContainer">
                        <div class="w-full hidden lg:grid grid-cols-3 xlg:grid-cols-6 gap-3">
                            {% for note in notes %}
                            <div class="h-[150px] shadow-md rounded-md p-5 cursor-pointer"
                                style="background-color: {{note.color}}"
                                onclick="showModal('{{ note.text }}', '{{ note.color }}')">
                                <p class="text-sm text-gray-500 overflow-hidden"
                                    style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;">
                                    {{ note.text }}
                                </p>
                            </div>
                            {% endfor %}
                        </div>

                        <!-- MOBILE NOTES IN SLIDER -->
                        <div class="w-full block lg:hidden">
                            <div class="swiper-container mt-3">
                                <div class="swiper-wrapper">
                                    {% for note in notes %}
                                    <div class="swiper-slide cursor-pointer">
                                        <div class="w-full h-[150px] p-3 flex justify-start items-start rounded-md shadow-md"
                                            style="background-color: {{note.color}}"
                                            onclick="showModal('{{ note.text }}', '{{ note.color }}')">
                                            <p class="text-sm text-gray-500 overflow-hidden"
                                                style="word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;">
                                                {{ note.text }}
                                            </p>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- DYNAMIC CONTENT AND USERS ACTIVITY SECTION -->
            <div class="w-full flex justify-between gap-5 px-5 s:px-9 pb-5">

                {% block content %}
                replace me
                {% endblock content %}

                <!-- RIGHT SIDE / USERS ACTIVITY -->
                <div class="w-[25%] hidden xxlg1:flex flex-col gap-3">

                    <div
                        class="hidden xxlg1:block w-full bg-white  {% if latest_statuses_time_ago %}h-[1283px]{% else %}h-[305px]{%endif%} overflow-y-auto overflow-hidden rounded-md shadow-md py-5 px-3 relative">

                        <a href="{% url 'recentactivitiespage' %}">
                            <div>
                                <img src="{% static 'images/icons/expand.png' %}" class="absolute w-[25px] right-3 top-5 hover:scale-105 cursor-pointer duration-300">
                            </div>
                        </a>


                        <h1 class="text-2xl text-secondosiblue text-center font-semibold">Users Activity</h1>
                        <div class="w-full h-fit mt-2" id="activitiesContainer">

                            {% include 'recent-activities.html' %}

                        </div>
                    </div>


                    <!-- CONNECTED USERS -->
                    <div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
                        <div class="w-full h-full flex flex-col gap-3 items-center">
                            <div class="w-full flex justify-center items-center">
                                <p class="text-[20px] text-secondosiblue font-bold text-center"><span
                                        class="text-green-700"></span>
                                    Connected Users</p>
                            </div>

                            <div class="w-full flex flex-wrap gap-2">

                                {% for online in online_staff_profiles %}
                                <div class="relative userProfileContainer">
                                    <div
                                        class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
                                        <p>{{online.user.first_name}}</p>
                                    </div>
                                    <div class="w-[30px] h-[30px] rounded-full userImage">
                                        <img src="{{online.image.url}}" alt="User Image"
                                            class="w-full h-full rounded-full object-cover">
                                    </div>
                                </div>
                                {% endfor %}

                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- MOBILE FOOTER -->
            <div class="bg-osiblue h-fit py-2 mobileFooter">
                <div class="w-full flex flex-col justify-center items-center gap-1">
                    <div class="flex justify-center items-center gap-2">
                        <img src="{% static 'images/banner-logo.png' %}" alt="Ositcom Logo" class="w-[30px] h-[25px]">
                        <p class="text-gray-200 font-light text-xs">Powered By OSITCOM</p>
                    </div>
                    <p class="text-gray-200 font-light text-xs">Copyrights © 2024 All Rights Reserved</p>
                </div>
            </div>

        </div>
    </div>


    <!---------------------- JS SCRIPTS -------------------->
    <!-- SIDE BAR SCRIPT -->
    <script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>

    <!-- DRAGGABLE SLIDER SCRIPT FOR NOTES ON MOBILE -->
    <script type="text/javascript" src='{% static "js/draggable-slider.js" %}'></script>

    <!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
    <script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>

    <!-- IT OPENS A POPUP FOR THE WHOLE NOTE CONTENT -->
    <script type="text/javascript" src='{% static "js/notes-pop-modal.js" %}'></script>

    <!-- TO OPEN TASKS ACTIONS BUTTONS CONTAINER ON MOBILE -->
    <script type="text/javascript" src='{% static "js/tasks.js" %}'></script>

    <!-- TO SWITCH BETWEEN STATUSES FROM ONLINE TO OFFLINE -->
    <script type="text/javascript" src='{% static "js/switch-status.js" %}'></script>

    <!-- TO OPEN EMOJI PICKER TO ADD REACTIONS -->
    <script type="text/javascript" src='{% static "js/emoji-picker.js" %}'></script>

    <!-- TO RELOAD THE STATUS CONTAINER -->
    <script type="text/javascript" src='{% static "js/get-updated-last-status.js" %}'></script>

    <!-- TO RELOAD THE USERS ACTIVITY CONTAINER -->
    <script type="text/javascript" src='{% static "js/get-updated-user-activity.js" %}'></script>
    
</body>

</html>