{% load static %}
{% 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 filtered_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 pt-4 pb-1 px-5 flex flex-col gap-1 justify-center items-center text-center {% 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 %} 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 %}


<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
            id="closeModalButton">
            <i class="fa fa-close"></i>
        </button>
        <iframe id="popupModalFrame" frameborder="0"></iframe>
    </div>
</div>

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