{% extends "main.html" %}
{%load static%}
{% block title %}My Projects{% endblock %}
{% block content %}


<div class="w-full xxlg1:w-[75%]">
    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
        <div class="w-full flex justify-between items-center gap-3">
            <h1 class="text-secondosiblue text-[25px]">My Projects</h1>

            <div class="projectKnowledgeButton" data-modal-url="{% url 'project_knowledge' %}">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    class="w-7 h-7 text-secondosiblue cursor-pointer hover:scale-105 duration-500"
                    color="#000000" fill="none">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" />
                    <path
                        d="M10 9C10 7.89543 10.8954 7 12 7C13.1046 7 14 7.89543 14 9C14 9.39815 13.8837 9.76913 13.6831 10.0808C13.0854 11.0097 12 11.8954 12 13V13.5"
                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                    <path d="M11.992 17H12.001" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </div>
        </div>


        <!-- PROJECT FILTERING -->
        <div
            class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col md:flex-row justify-between items-center gap-3">
            <div class="w-full md:w-fit flex flex-col md:flex-row justify-start items-center gap-3">
                <div class="relative h-fit w-full md:w-fit flex items-center">
                    <input type="text" placeholder="Enter Project Name"
                        class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full md:w-[300px] h-[40px] relative">
                    <button
                        class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
                        <i class="fa fa-search"></i>
                    </button>
                </div>

                <select name="" id="statusesSelectTag"
                    class="border border-gray-300 p-2 rounded-md outline-none w-full md:w-[250px] text-gray-500 h-[40px]">
                    <option value="All">All</option>
                    <option value="Pending">Pending</option>
                    <option value="In Progress" selected>In Progress</option>
                    <option value="Completed">Completed</option>
                    <option value="Cancelled">Cancelled</option>
                </select>
            </div>
            <div class="w-full md:w-fit">
                <a href="{% url 'addproject' %}" class="w-full md:w-fit">
                    <button
                        class="w-full md:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
                        Project</button>
                </a>
            </div>
        </div>
    </div>

    <div class="w-full flex justify-center items-center p-5 hidden" id="projectLoader">
        <div role="status">
            <svg aria-hidden="true" class="w-12 h-12 text-gray-400 animate-spin dark:text-gray-600 fill-osiblue"
                viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
                    fill="currentColor" />
                <path
                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
                    fill="currentFill" />
            </svg>
        </div>
    </div>



    <div class="w-full flex flex-col gap-5 mt-3" id="inProgressProjectsContainer">
        {% for project in latest_pinned_projects %} 
        <div
            class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
            <p id="projectId" class="hidden">{{project.id}}</p>

            <div class="w-full bg-white h-fit rounded-md border border-gray-200">
                <a href="{% url 'detailed-project' project.project_id %}">
                    <div class="w-full px-5 pt-4 pb-1 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300 relative {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %} {% if project.projectstatus_set.all.last.status == 'Cancelled' %}bg-red-500{% endif %} {% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %} {% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %} ">
                        <p>{{project.name}}</p>

                        <div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
                            <p class="startDate">{{project.start_date}}</p>
                            <p class="endDate">{{project.end_date}}</p>
                        </div>

                        <div class="absolute top-3 right-3 cursor-pointer" id="pinProject">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
                            color="#000000" fill="none">
                            <path
                                d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                                d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" />
                            </svg>
                        </div>
                
                        <div class="absolute top-3 right-3 cursor-pointer hidden" id="unpinProject">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
                                color="#000000" fill="none">
                                <path
                                    d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                    d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </div>
                    </div>
                </a>



                <!-- Progress Bar -->
                <div class="w-full h-[8px] bg-gray-100 mainBar">
                    <div class="h-full progressBar">
                    </div>
                </div>



                <div class="w-full grid grid-cols-1 l:grid-cols-2">
                    <!-- Left Section -->
                    <div class="flex flex-col justify-between">
                        <!-- Details -->
                        <div class="w-full flex flex-col gap-3 p-5">
                            <div class="w-full flex justify-start items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
                                </svg>

                                <p class="text-secondosiblue"><span
                                        class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open {% if project.open_user_tasks_count == 1 %} Task {% else %} Tasks {% endif %}</p>
                            </div>

                            <div class="w-full flex justify-start items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 text-secondosiblue" color="#000000" fill="none">
                                    <path d="M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
                                    <path d="M9 3.5L9 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <p class="text-secondosiblue"><span
                                        class="font-poppinsBold">{{project.open_tickets_count}}</span> Open {% if project.open_tickets_count == 1 %} Ticket {% else %} Tickets {% endif %}</p>
                            </div>



                            <div class="w-full flex justify-start items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                </svg>

                                <p class="text-secondosiblue">Total Time: <span
                                        class="font-poppinsBold">{{project.total_time_worked_hours}}hr
                                        {{project.total_time_worked_minutes}}min
                                        {{project.total_time_worked_seconds}}sec</span>
                                </p>
                            </div>

                        </div>
                    </div>

                    <!-- Right Section - Recent Notes -->
                    <div class="w-full border-l-none l:border-l border-gray-200">
                        {% if project.note_set.exists %}
                        {% with last_note=project.note_set.last %}
                        <div class="w-full h-full flex flex-col gap-3 justify-center items-center p-3">
                            <p class="text-gray-400 break-all whitespace-pre-wrap text-sm">{{ last_note.text }}</p>
                            <div class="w-[30px] h-[30px] rounded-full shadow-md p-1 flex justify-center items-center bg-gray-100 cursor-pointer hover:scale-105 duration-300 addProjectNoteButton"
                                data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
                                    stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                </svg>
                            </div>
                        </div>
                        {% endwith %}
                        {% else %}
                        <div class="w-full h-full flex flex-col justify-center items-center gap-3 p-3">
                            <p class="text-secondosiblue">No Recent Note</p>
                            <div class="w-[30px] h-[30px] rounded-full shadow-md p-1 flex justify-center items-center bg-gray-100 cursor-pointer hover:scale-105 duration-300 addProjectNoteButton"
                                data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
                                    stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                </svg>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}


        {% for project in in_progress_projects %} 
        <div
            class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
            <p id="projectId" class="hidden">{{project.id}}</p>

            <div class="w-full bg-white h-fit rounded-md border border-gray-200">
                <a href="{% url 'detailed-project' project.project_id %}">
                    <div class="w-full px-5 pt-4 pb-1 bg-orange-500 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300 relative">
                        <p>{{project.name}}</p>

                        <div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
                            <p class="startDate">{{project.start_date}}</p>
                            <p class="endDate">{{project.end_date}}</p>
                        </div>

                        <div class="absolute top-3 right-3 cursor-pointer" id="pinProject">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
                                color="#000000" fill="none">
                                <path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path
                                    d="M13.2585 18.8714C9.51516 18.0215 5.97844 14.4848 5.12853 10.7415C4.99399 10.1489 4.92672 9.85266 5.12161 9.37197C5.3165 8.89129 5.55457 8.74255 6.03071 8.44509C7.10705 7.77265 8.27254 7.55888 9.48209 7.66586C11.1793 7.81598 12.0279 7.89104 12.4512 7.67048C12.8746 7.44991 13.1622 6.93417 13.7376 5.90269L14.4664 4.59604C14.9465 3.73528 15.1866 3.3049 15.7513 3.10202C16.316 2.89913 16.6558 3.02199 17.3355 3.26771C18.9249 3.84236 20.1576 5.07505 20.7323 6.66449C20.978 7.34417 21.1009 7.68401 20.898 8.2487C20.6951 8.8134 20.2647 9.05346 19.4039 9.53358L18.0672 10.2792C17.0376 10.8534 16.5229 11.1406 16.3024 11.568C16.0819 11.9955 16.162 12.8256 16.3221 14.4859C16.4399 15.7068 16.2369 16.88 15.5555 17.9697C15.2577 18.4458 15.1088 18.6839 14.6283 18.8786C14.1477 19.0733 13.8513 19.006 13.2585 18.8714Z"
                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </div>
                
                        <div class="absolute top-3 right-3 cursor-pointer hidden" id="unpinProject">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 text-white"
                                color="#000000" fill="none">
                                <path
                                    d="M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5"
                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                    d="M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12"
                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M3 21L8 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M3 3L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </div>
                    </div>
                </a>



                <!-- Progress Bar -->
                <div class="w-full h-[8px] bg-gray-100 mainBar">
                    <div class="h-full progressBar">
                    </div>
                </div>



                <div class="w-full grid grid-cols-1 l:grid-cols-2">
                    <!-- Left Section -->
                    <div class="flex flex-col justify-between">
                        <!-- Details -->
                        <div class="w-full flex flex-col gap-3 p-5">
                            <div class="w-full flex justify-start items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
                                </svg>

                                <p class="text-secondosiblue"><span
                                        class="font-poppinsBold">{{project.open_user_tasks_count}}</span> Open {% if project.open_user_tasks_count == 1 %} Task {% else %} Tasks {% endif %}</p>
                            </div>

                            <div class="w-full flex justify-start items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 text-secondosiblue" color="#000000" fill="none">
                                    <path d="M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
                                    <path d="M9 3.5L9 20.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <p class="text-secondosiblue"><span
                                        class="font-poppinsBold">{{project.open_tickets_count}}</span> Open {% if project.open_tickets_count == 1 %} Ticket {% else %} Tickets {% endif %}</p>
                            </div>



                            <div class="w-full flex justify-start items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                </svg>

                                <p class="text-secondosiblue">Total Time: <span
                                        class="font-poppinsBold">{{project.total_time_worked_hours}}hr
                                        {{project.total_time_worked_minutes}}min
                                        {{project.total_time_worked_seconds}}sec</span>
                                </p>
                            </div>

                        </div>
                    </div>

                    <!-- Right Section - Recent Notes -->
                    <div class="w-full border-l-none l:border-l border-gray-200">
                        {% if project.note_set.exists %}
                        {% with last_note=project.note_set.last %}
                        <div class="w-full h-full flex flex-col gap-3 justify-center items-center p-3">
                            <p class="text-gray-400 break-all whitespace-pre-wrap text-sm">{{ last_note.text }}</p>
                            <div class="w-[30px] h-[30px] rounded-full shadow-md p-1 flex justify-center items-center bg-gray-100 cursor-pointer hover:scale-105 duration-300 addProjectNoteButton"
                                data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
                                    stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                </svg>
                            </div>
                        </div>
                        {% endwith %}
                        {% else %}
                        <div class="w-full h-full flex flex-col justify-center items-center gap-3 p-3">
                            <p class="text-secondosiblue">No Recent Note</p>
                            <div class="w-[30px] h-[30px] rounded-full shadow-md p-1 flex justify-center items-center bg-gray-100 cursor-pointer hover:scale-105 duration-300 addProjectNoteButton"
                                data-modal-url="{% url 'addprojectnotemodal' project.project_id %}">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
                                    stroke="currentColor" class="w-6 h-6 text-secondosiblue">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                </svg>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>


    <!-- PROJECTS BY STATUS -->
    <div class="w-full flex flex-col gap-5 mt-3" id="projectsByStatusContainer">
    </div>
</div>



<!---------------------- JS SCRIPTS -------------------->

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

<!-- TO DISPLAY THE PROJECT PROGRESS BAR BASED ON ITS REMAINING TIME -->
<script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>

<script type="module" src='{% static "js/projects/projects-filtering.js" %}'></script>


{% endblock content %}