{% load static %}

<div class="flex justify-between items-center gap-3 bg-slate-700 border border-slate-700 text-white py-2 px-3 rounded-md shadow-md">
    <div>
        <p>{{epic.start_date}} - {{epic.end_date}}<p>
    </div>
    <div class="flex justify-end items-center gap-3">
        <button class="bg-transparent border border-white text-white rounded-md py-2 px-3 cursor-pointer hover:bg-white hover:text-slate-700">Edit Epic</button>
        <button class="bg-transparent border border-white text-white rounded-md py-2 px-3 cursor-pointer hover:bg-white hover:text-slate-700">Delete Epic</button>
        <button class="bg-transparent border border-white text-white rounded-md py-2 px-3 cursor-pointer hover:bg-white hover:text-slate-700">View Epic</button>
    </div>
</div>

<!-- TASKS ON DESKTOP -->
<div class="hidden md:block mt-5">
    <!-- TASKS TABLE -->
    {% for task in related_tasks %}
    <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
        <div class="w-full bg-white h-fit rounded-md border border-gray-200">
            <!-- TABLE HEADER -->
            <div class="w-full h-[70px] rounded-t-md grid grid-cols-2">
                {% if task.status == 'Open' %}
                <div
                    class="flex justify-center items-center border-r border-b border-gray-200 bg-blue-500 rounded-tl-md text-xl text-white font-semibold">
                    <p>{{task.name}}</p>
                </div>
                {% endif %}

                {% if task.status == 'Working On' %}
                <div
                    class="flex justify-center items-center border-r border-b border-gray-200 bg-yellow-500 rounded-tl-md text-xl text-white font-semibold">
                    <p>{{task.name}}</p>
                </div>
                {% endif %}

                {% if task.status == 'Closed' %}
                <div
                    class="flex justify-center items-center border-r border-b border-gray-200 bg-green-700 rounded-tl-md text-xl text-white font-semibold">
                    <p>{{task.name}}</p>
                </div>
                {% endif %}

                <div class="grid grid-cols-3">
                    {% if task.status == 'Open' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-blue-500">
                        <p>{{task.status}}</p>
                    </div>
                    {% endif %}

                    {% if task.status == 'Working On' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-yellow-500">
                        <p>{{task.status}}</p>
                    </div>
                    {% endif %}

                    {% if task.status == 'Closed' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-green-700">
                        <p>{{task.status}}</p>
                    </div>
                    {% endif %}

                    {% if task.status == 'Open' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-blue-500">
                        <p>{{task.formatted_start_date}}</p>
                    </div>
                    {% endif %}

                    {% if task.status == 'Working On' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-yellow-500">
                        <p>{{task.formatted_start_date}}</p>
                    </div>
                    {% endif %}

                    {% if task.status == 'Closed' %}
                    <div
                        class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-green-700">
                        <p>{{task.formatted_start_date}}</p>
                    </div>
                    {% endif %}

                    {% if task.status == 'Open' %}
                    {% if task.end_date < current_date %} <div
                        class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md">
                        <p>{{task.formatted_end_date}}</p>
                </div>
                {% else %}
                <div
                    class="flex justify-center items-center border-b border-gray-200 text-white bg-blue-500 rounded-tr-md">
                    <p>{{task.formatted_end_date}}</p>
                </div>
                {% endif %}
                {% endif %}

                {% if task.status == 'Working On' %}
                {% if task.end_date < current_date %} <div
                    class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md">
                    <p>{{task.formatted_end_date}}</p>
            </div>
            {% else %}
            <div
                class="flex justify-center items-center border-b border-gray-200 text-white bg-yellow-500 rounded-tr-md">
                <p>{{task.formatted_end_date}}</p>
            </div>
            {% endif %}
            {% endif %}

            {% if task.status == 'Closed' %}
            {% if task.end_date < current_date %} <div
                class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md">
                <p>{{task.formatted_end_date}}</p>
        </div>
        {% else %}
        <div class="flex justify-center items-center border-b border-gray-200 text-white bg-green-700 rounded-tr-md">
            <p>{{task.formatted_end_date}}</p>
        </div>
        {% endif %}
        {% endif %}
    </div>
</div>

<!-- TABLE BODY -->
<div class="w-full h-fit grid grid-cols-2">
    <!-- LEFT SIDE OF TABLE BODY -->
    <div class="h-fit bg-white p-3 rounded-bl-md">
        <!-- 1st row -->
        <div class="w-full flex flex-col gap-2">
            <div class="flex justify-start items-center gap-2">
                <p class="text-gray-400  text-base">Project:</p>
                <p class="text-slate-700 text-base">{{task.project.name}}</p>
            </div>

            <div class="flex justify-start items-center gap-2">
                <p class="text-gray-400  text-base">Epic:</p>
                <p class="text-slate-700 text-base">{{task.epic.title}}</p>
            </div>

            <div class="flex justify-start items-center gap-2">
                <p class="text-gray-400  text-base">Assigned To:</p>
                <p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
                    {{task.assigned_to.user.last_name}}</p>
            </div>

            <div class="flex justify-start items-center gap-2">
                <p class="text-gray-400  text-base">Files:</p>
                <p class="text-slate-700 text-base"></p>
            </div>
            <div class="flex justify-start items-center gap-2">
                <p class="text-gray-400  text-base">Tags:</p>
                <p class="text-slate-700 text-base"></p>
            </div>

            <div class="flex justify-start items-center gap-2">
                <p class="text-gray-400  text-base">Extra:</p>
                <p class="text-slate-700 text-base">{{task.extra}}</p>
            </div>
        </div>
    </div>

    <!-- RIGHT SIDE OF TABLE BODY -->
    <div class="h-fit bg-white grid grid-cols-3 rounded-br-md">
        <button class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Close</button>

        <button class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
            data-modal-url="{% url 'edittaskstatusmodal' task.task_id %}">Update
            Status</button>

        <button class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500"
           >Add
            Time</button>

        <button
            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 deleteTaskButton">Delete</button>

        <a href="{% url 'edittask' task.task_id %}">
            <button class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Edit</button>
        </a>

        <button class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 showPointsButton"
            data-modal-url="{% url 'showpoints' task.task_id  %}">Show
            Points</button>

        <button class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addPointButton"
            data-modal-url="{% url 'addpointmodal' task.task_id %}">Add
            Point</button>

        <a href="{% url 'detailed-task' task.task_id %}">
            <button
                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Details</button>
        </a>

        <button
            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 rounded-br-md timelineButton"
            data-modal-url="{% url 'timeline' %}">Timeline</button>
    </div>
</div>
</div>
</div>
{% endfor %}
</div>

<!-- TASKS ON MOBILE -->
<div class="block md:hidden">
    {% for task in related_tasks %}
    <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
        <div class="border border-gray-200 rounded-t-md">
            <div class="w-full rounded-t-md">
                {% if task.status == 'Open' %}
                <div
                    class="w-full flex justify-center items-center text-white text-center bg-red-500 rounded-t-md py-5 px-3">
                    <p>{{task.name}}</p>
                </div>
                {% endif %}

                {% if task.status == 'Working On' %}
                <div
                    class="w-full flex justify-center items-center text-white text-center bg-orange-500 rounded-t-md py-5 px-3">
                    <p>{{task.name}}</p>
                </div>
                {% endif %}
            </div>


            <div class="grid grid-cols-3 border-t border-gray-200">
                {% if task.status == 'Open' %}
                <div
                    class="text-white bg-red-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
                    <p>{{task.status}}</p>
                </div>
                {% endif %}

                {% if task.status == 'Working On' %}
                <div
                    class="text-white bg-orange-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
                    <p>{{task.status}}</p>
                </div>
                {% endif %}


                {% if task.status == 'Open' %}
                <div
                    class="text-white bg-red-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
                    <p>{{task.start_date}}</p>
                </div>
                {% endif %}

                {% if task.status == 'Working On' %}
                <div
                    class="text-white bg-orange-500 border-r border-gray-200 flex justify-center items-center text-center py-3 text-sm">
                    <p>{{task.start_date}}</p>
                </div>
                {% endif %}


                {% if task.status == 'Open' %}
                <div class="text-white bg-red-500 flex justify-center items-center text-center py-3 text-sm">
                    <p>{{task.end_date}}</p>
                </div>
                {% endif %}

                {% if task.status == 'Working On' %}
                <div class="text-white bg-orange-500 flex justify-center items-center text-center py-3 text-sm">
                    <p>{{task.end_date}}</p>
                </div>
                {% endif %}
            </div>


            <div class="w-full flex flex-col gap-2 p-3">
                <div class="flex justify-start items-center gap-2">
                    <p class="text-gray-400  text-base">Project:</p>
                    <p class="text-slate-700 text-base">{{task.project.name}}</p>
                </div>

                <div class="flex justify-start items-center gap-2">
                    <p class="text-gray-400  text-base">Epic:</p>
                    <p class="text-slate-700 text-base">{{task.epic.title}}</p>
                </div>

                <div class="flex justify-start items-center gap-2">
                    <p class="text-gray-400  text-base">Assigned To:</p>
                    <p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
                        {{task.assigned_to.user.last_name}}</p>
                </div>

                <div class="flex justify-start items-center gap-2">
                    <p class="text-gray-400  text-base">Extra:</p>
                    <p class="text-slate-700 text-base">{{task.extra}}</p>
                </div>
            </div>


            <div class="w-full bg-gray-100 flex justify-between items-center py-3 px-3 text-slate-700 actionsButton">
                <p>Actions</p>
                <i class="fa fa-angle-down" style="font-size: 20px;"></i>
                <i class="fa fa-angle-up" style="font-size: 20px; display: none;"></i>
            </div>


            <div class="grid-cols-3 actionsContainer hidden">
                <button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Close</button>

                <button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
                    data-modal-url="{% url 'edittaskstatusmodal' task.task_id %}">Update
                    Status</button>

                <button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500"
                   >Add
                    Time</button>

                <button
                    class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 deleteTaskButton">Delete</button>

                <a href="{% url 'edittask' task.task_id %}">
                    <button
                        class="w-full p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Edit</button>
                </a>

                <button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 showPointsButton"
                    data-modal-url="{% url 'showpoints' task.task_id  %}">Show
                    Points</button>

                <button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 addPointButton"
                    data-modal-url="{% url 'addpointmodal' task.task_id %}">Add
                    Point</button>

                <a href="{% url 'detailed-task' task.task_id %}">
                    <button
                        class="w-full p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500">Details</button>
                </a>

                <button class="p-2 border border-gray-200 text-sm h-[70px] bg-gray-100 text-gray-500 timelineButton"
                    data-modal-url="{% url 'timeline' %}">Timeline</button>
            </div>
        </div>
    </div>
    {% endfor %}
</div>