{% 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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

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

</head>

<body class="bg-gray-200">
    <div class="w-full flex">
        <!-- FIXED SIDE NAVBAR -->
        <div class="fixed h-screen w-[300px] bg-slate-700 pt-9 flex flex-col justify-between flex-grow overflow-y-auto fixedSideHeader"
            id="fixedSideHeader">
            <!-- Menu Items -->
            <div class="w-full h-fit flex flex-col justify-center items-center px-5">
                <a href="{% url 'home' %}">
                    <div class="mb-14 w-full">
                        <h1 class="text-white text-4xl text-center">OSINA</h1>
                    </div>
                </a>

                <a href="{% url 'home' %}" class="w-full">
                    <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
                        <i class="fa fa-home" style="font-size: 20px; color: white;"></i>
                        <p class="text-white">Home</p>
                    </div>
                </a>


                <!-- 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">
                            <i class="fa fa-tasks" style="font-size: 20px; color: white;"></i>
                            <p class="text-white">My Projects</p>
                        </div>
                        <div>
                            <i class="angleDown fa fa-angle-down" style="font-size: 20px; color: white;"></i>
                            <i class="angleUp fa fa-angle-up" style="font-size: 20px; 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 text-[18px] 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 text-[18px]">
                                <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 text-[18px]">
                                <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 py-2 text-[18px]">
                                <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 text-[18px]">
                                <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">
                        <i class="fas fa-project-diagram" style="font-size: 18px; color: white;"></i>
                        <p class="text-white">My Projects</p>
                    </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">
                        <i class="fas fa-tasks" style="font-size: 20px; color: white;"></i>
                        <p class="text-white">Tickets</p>
                    </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">
                        <i class="fas fa-receipt" style="font-size: 20px; color: white;"></i>
                        <p class="text-white">Invoices</p>
                    </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">
                        <i class="fas fa-folder-open" style="font-size: 20px; color: white;"></i>
                        <p class="text-white">Products</p>
                    </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">
                        <i class="fa fa-info-circle" style="font-size: 20px; color: white;"></i>
                        <p class="text-white">Knowledgebase</p>
                    </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">
                        <i class="fas fa-address-card" style="font-size: 20px; color: white;"></i>
                        <p class="text-white">Contact Us</p>
                    </div>
                </div>


                <a href="{% url 'signout' %}" class="w-full">
                    <div class="w-full flex justify-start items-center gap-3 py-3">
                        <i class="fa fa-power-off" style="font-size: 20px; color: white;"></i>
                        <p class="text-white">Logout</p>
                    </div>
                </a>
            </div>

            <!-- Footer -->
            <div
                class="w-full xlg1:w-[300px] h-fit bg-slate-800 flex flex-col items-center absolute xlg1:fixed justify-center gap-2 py-2 bottom-0 inset-x-0">
                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-gray-500 font-light text-sm">Powered By Ositcom</p>
                    <p class="text-gray-500 font-light text-sm">Copyrights © 2023 All Rights Reserved</p>
                </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">
                <div class="w-fit flex justify-center items-center gap-10">
                    <div class="w-fit hidden xlg:flex flex-col gap-2 cursor-pointer" id="burgerMenuButton">
                        <div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
                        <div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
                        <div class="burgerMenuLine w-[25px] h-[2px] bg-slate-800 duration-300"></div>
                    </div>

                    <div class="w-fit flex flex-row xlg:hidden gap-2 cursor-pointer" id="closeMenuButton">
                        <div class="closeMenuLine w-[2px] h-[25px] bg-slate-800 duration-300"></div>
                        <div class="closeMenuLine w-[2px] h-[25px] bg-slate-800 duration-300"></div>
                        <div class="closeMenuLine w-[2px] h-[25px] bg-slate-800 duration-300"></div>
                    </div>
                </div>

                <div>
                    <div class="w-fit flex justify-between items-center gap-3">

                        <div class="flex justify-center items-center gap-2">
                            <p class="text-gray-400">{{request.user.first_name}}
                                {{request.user.last_name}}</p>
                            <i class="fa fa-angle-down" style="color: grey;"></i>
                        </div>


                        <div class="w-[40px] s:w-[50px] h-[40px] s:h-[50px] bg-slate-600 rounded-full">
                            <img src='{{request.user.staffprofile.image.url}}' alt="user-image"
                                class="w-full h-full object-cover rounded-full">
                        </div>
                    </div>
                </div>
            </div>

            <!-- MODULES SECTION -->
            <div class="w-full h-fit grid grid-cols-1 s:grid-cols-2 lg:grid-cols-4 gap-5 px-5 s:px-9 py-5">
                <div class="bg-white shadow-md rounded-md p-5">
                    <div class="w-full h-full flex flex-col justify-between items-center gap-3">
                        <div class="w-full flex justify-between items-center">
                            <p class="text-xl text-slate-800 font-bold uppercase">Projects</p>
                            <i class="fas fa-project-diagram" style="font-size: 30px; color: cornflowerblue;"></i>
                        </div>
                        <div
                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-blue-500 flex justify-center items-center">
                            <p class="text-blue-500 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-xl text-slate-800 font-bold uppercase">Tickets</p>
                            <i class="fa fa-tasks" style="font-size: 30px; color: salmon;"></i>
                        </div>
                        <div
                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-red-400 flex justify-center items-center">
                            <p class="text-red-400 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-xl text-slate-800 font-bold uppercase">Invoices</p>
                            <i class="fas fa-receipt" style="font-size: 30px; color: red;"></i>
                        </div>
                        <div
                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-red-500 flex justify-center items-center">
                            <p class="text-red-500 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-xl text-slate-800 font-bold uppercase">Balance</p>
                            <i class="fas fa-money-bill" style="font-size: 30px; color: green"></i>
                        </div>
                        <div
                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center">
                            <p class="text-green-700 text-xl font-semibold">2</p>
                        </div>
                    </div>
                </div>
            </div>

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

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

</body>

</html>