{% load static %}

{% for task in open_tasks %}
<a href="{% url 'detailed-task' task.task_id %}">
    <!-- TABLE HEADER -->
    <div class="w-full rounded-md grid grid-cols-1 l:grid-cols-2">
        <div
            class="w-full flex flex-col justify-center items-center gap-2 border-r border-b border-gray-200 {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %}  {% if task.status == 'Closed' %}bg-green-700{% endif %} rounded-t-md l:rounded-tr-none l:rounded-l-md text-base text-white text-center py-3 px-3 bg-opacity-70">
            <p>{{task.name}}</p>

            <div class="w-full flex justify-center 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-white">
                    <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-white text-sm s:text-base">Total Time: <span class="font-poppinsBold">
                    {{task.total_task_time.0 }}{% if task.total_task_time.0 == 1 %}hr{% else %}hrs{% endif %} 
                    {{task.total_task_time.1 }}{% if task.total_task_time.1 == 1 %}min{% else %}mins{% endif %} 
                    {{task.total_task_time.2 }}{% if task.total_task_time.2 == 1 %}sec{% else %}secs{% endif %}</span>
                </p>
            </div>
        </div>

        <div class="w-full grid grid-cols-2">
            <div
                class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %}  {% if task.status == 'Closed' %}bg-green-700{% endif %} py-3 px-3 bg-opacity-70">
                <p>{{task.status}}</p>
            </div>

            <div
                class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %}  {% if task.status == 'Closed' %}bg-green-700{% endif %} py-3 px-3 rounded-none l:rounded-tr-md bg-opacity-70">
                <p>{{task.assigned_to.user.first_name}}
                    {{task.assigned_to.user.last_name}}</p>
            </div>

            <div
                class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %}  {% if task.status == 'Closed' %}bg-green-700{% endif %} py-3 px-3 rounded-bl-md l:rounded-none bg-opacity-70">
                <p>{{task.start_date|date:"d-m-Y"}}</p>
            </div>

            <div
                class="flex justify-center items-center border-r border-b border-gray-200 text-white {% if task.status == 'Open' %}bg-secondosiblue{% endif %}  {% if task.status == 'Working On' %}bg-yellow-500{% endif %}  {% if task.status == 'Closed' %}bg-green-700{% endif %} py-3 px-3  rounded-br-md bg-opacity-70">
                <p>{{task.end_date|date:"d-m-Y"}}</p>
            </div>
        </div>
    </div>
</a>
{% endfor %}