{% load static %}
<div
    class="flex flex-col md:flex-row justify-between items-center gap-3 bg-gray-100 border border-gray-100 text-white py-2 px-3 rounded-md shadow-md">
    <div>
        <p class="text-secondosiblue">{{epic.start_date}} - {{epic.end_date}}
        <p>
    </div>
    <div class="w-full l:w-fit flex flex-col md:flex-row justify-end items-center gap-3">
        <button
            class="w-full md:w-fit bg-transparent border border-secondosiblue text-secondosiblue rounded-md py-2 px-3 cursor-pointer hover:bg-secondosiblue hover:text-white duration-300">Edit
            Epic</button>
        <button
            class="w-full md:w-fit bg-transparent border border-secondosiblue text-secondosiblue rounded-md py-2 px-3 cursor-pointer hover:bg-secondosiblue hover:text-white duration-300">Delete
            Epic</button>
        <button
            class="w-full md:w-fit bg-transparent border border-secondosiblue text-secondosiblue rounded-md py-2 px-3 cursor-pointer hover:bg-secondosiblue hover:text-white duration-300">View
            Epic</button>
    </div>
</div>

<div class="mt-3 flex flex-col gap-3">
    <!-- TASKS TABLE -->
    {% for task in related_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 %}
</div>