{% extends "customer_main.html" %}
{%load static%}

{% block content %}

<div class="w-full flex flex-col gap-3">
    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <h1 class="text-secondosiblue text-[25px]">My Projects</h1>

        <div class="w-full grid grid-cols-1 l:grid-cols-2 gap-5 mt-4">

            {% for project in projects %}
            <a href="{% url 'customerprojectdetails' project.project_id %}">
                <div
                    class="w-full rounded-md flex flex-col justify-between items-center gap-3 px-5 py-9 h-[250px] bg-gray-50 shadow-md relative hover:bg-gray-100 duration-300 projectContainer">
                    <div class="flex flex-col justify-center items-center gap-5">
                        <div
                            class="w-[70px] h-[70px] rounded-full shadow-md">
                            {% if project.logo %}
                                <img src="{{project.logo.url}}" class="w-full h-full rounded-full object-cover">
                            {% else %}
                                <img src="{% static 'images/ositcom_logos/logobluebg-o.jpg' %}" class="w-full h-full rounded-full object-cover">
                            {% endif %}
                             
                        </div>

                        <div>
                            <p class="text-secondosiblue font-poppinsBold text-center text-xl">{{project.name}}</p>
                            <p class="text-sm uppercase font-light text-secondosiblue text-center">{{project.project_id}}</p>
                        </div>
                    </div>

                    <div
                        class="{% if project.projectstatus_set.all.last.status == 'In Progress' %} bg-orange-500 {% elif project.projectstatus_set.all.last.status == 'Completed' %} bg-green-700 {% elif project.projectstatus_set.all.last.status == 'Cancelled' %} bg-red-500 {% endif %} px-3 py-2 rounded-r-md text-xs text-white font-light uppercase absolute top-5 left-0">
                        <p>{{project.projectstatus_set.all.last.status}}</p>
                    </div>


                    <div class="w-full mt-5 flex flex-col gap-2">
                        <div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-xs">
                            <p class="startDate">{{project.start_date}}</p>
                            <p class="endDate">{{project.end_date}}</p>
                        </div>

                        <p id="projectId" class="hidden">{{project.id}}</p>

                        <div class="w-full rounded-md bg-white shadow-md h-[8px] mainBar">
                            <div class=" rounded-md h-full progressBar"></div>
                        </div>
                    </div>

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

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

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

{% endblock content %}