{% extends "main.html" %}
{%load static%}
{% block content %}


<div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">

    <div
        class="w-full rounded-md flex flex-col justify-center items-center py-3  bg-osiblue bg-opacity-70">
        <h1 class="text-xl md:text-3xl text-white font-semibold text-center">{{milestone.name}}</h1>
    </div>


    <div class="w-full flex flex-col gap-5 mt-5">
        <div>
            <p class="text-gray-500 text-xl">Project: <a href="{% url 'detailed-project' milestone.project.project_id %}"
                    class="text-slate-800 text-xl font-semibold hover:text-secondosiblue duration-300">{{milestone.project.name}}</a></p>
        </div>

        <div>
            <p class="text-gray-500 text-xl">Title: <span
                    class="text-slate-800 text-xl font-semibold">{{milestone.name}}</span></p>
        </div>
        <div>
            <p class="text-gray-500 text-xl">Description: <span
                    class="text-slate-800 text-xl font-semibold">{{milestone.description}}</span></p>
        </div>


        <div>
            <p class="text-gray-500 text-xl">Start Date: <span
                    class="text-slate-800 text-xl font-semibold">{{milestone.start_date}}</span></p>
        </div>

        <div>
            <p class="text-gray-500 text-xl">End Date: <span
                    class="text-slate-800 text-xl font-semibold">{{milestone.end_date}}</span></p>
        </div>

        <!-- STORIES -->
        <div class="mt-5 relative">
            <div class="overflow-x-auto border border-gray-300 rounded-b-md mt-5 tableContainer">
                <div
                    class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
                    <div class="px-3">
                        <p class="text-secondosiblue uppercase font-bold">User Stories</p>
                    </div>

                    <button
                        class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addUserStoryButton"
                        data-modal-url="{% url 'addmilestoneuserstorymodal' milestone_id=milestone.id %}">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
                <table class="min-w-full divide-y">
                    <!-- TABLE HEADER -->
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Story
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Confirmed
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Completed
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                                Related Task
                            </th>
                            <th scope="col"
                                class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
                                Actions
                            </th>
                        </tr>
                    </thead>

                    <!-- TABLE BODY -->
                    <tbody class="bg-white divide-y divide-gray-200">
                        <!-- 1st row -->
                        {% if stories %}
                        {% for story in stories %}
                        <tr>
                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <p class="text-secondosiblue">{{story.content}}</p>
                            </td>
                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <p class="text-secondosiblue">{{story.confirmed}}</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                <p class="text-secondosiblue">{{story.completed}}</p>
                            </td>

                            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                                {% if story.task_set.all %}
                                {% for task in story.task_set.all %}
                                <div class="w-full flex flex-col justify-center items-center gap-2">
                                    <a class="text-gray-500 underline flex justify-center items-center gap-1 hover:text-secondosiblue duration-300 cursor-pointer"
                                        href="{% url 'detailed-task' task.task_id %}">{{task.name}}
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
                                        </svg>
                                    </a>
                                    <a href="{% url 'adduserstorytask' milestone.project.project_id story.id %}">
                                        <div
                                            class="w-[30px] h-[30px] rounded-full shadow-md bg-gray-50 text-secondosiblue border border-gray-100 flex justify-center items-center hover:bg-secondosiblue hover:text-gray-50 duration-300">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M12 4.5v15m7.5-7.5h-15" />
                                            </svg>
                                        </div>
                                    </a>
                                </div>

                                {% endfor %}
                                {% else %}
                                <div class="w-full flex flex-col justify-center items-center gap-2">
                                    <p class="text-secondosiblue">Add Task</p>
                                    <a href="{% url 'adduserstorytask' milestone.project.project_id story.id %}">
                                        <div
                                            class="w-[30px] h-[30px] rounded-full shadow-md bg-gray-50 text-secondosiblue border border-gray-100 flex justify-center items-center hover:bg-secondosiblue hover:text-gray-50 duration-300">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                                stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                                <path stroke-linecap="round" stroke-linejoin="round"
                                                    d="M12 4.5v15m7.5-7.5h-15" />
                                            </svg>
                                        </div>
                                    </a>
                                </div>
                                {% endif %}
                            </td>


                            <td class="px-6 py-4 text-center text-sm">
                                <div class="w-full flex justify-center items-center gap-3">
                                    <a data-modal-url="{% url 'edituserstorymodal' story.id %}" class="addUserStoryButton">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor"
                                            class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                        </svg>
                                    </a>
                                    <div class="cursor-pointer" data-modal-url="">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor"
                                            class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                        </svg>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                        {% else %}
                        <tr>
                            <td colspan="3" class="px-6 py-4 text-center text-sm text-secondosiblue">
                                No Stories at the moment
                            </td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



{% endblock content %}