{% extends "main.html" %}
{%load static%}
{% block content %}
<style>
    /* TO APPLY HOVER EFFECT ON THE CREATE TASK AND STORY BUTTONS WHEN THEY ARE NOT :disabled ANYMORE */
    .epicButtons:not([disabled]):hover {
        background-color: transparent;
        color: #3b82f6;
        /* Blue-500 color */
    }
</style>
<!-- NOTES SECTION -->
<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
        <div class="w-full flex justify-between items-center">
            <div>
                <p class="text-base text-gray-500">Recent Note:</p>
                <p class="text-slate-700">Send an Email to Salim.</p>
            </div>
            <div class="flex justify-end items-center gap-4">
                <button
                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
                    id="showNotesButton">Show
                    Notes</button>
                <button
                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
                    id="addNoteButton" data-modal-url="{% url 'addnote' %}">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>

        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
            id="notesContainer">
            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
                <p class="text-base text-slate-800">Send an Email to Salim.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Contact the client.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
            </div>

            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
            </div>
        </div>
    </div>
</div>

<!-- PROJECT DETAIL AND USERS ACTIVITY SECTION -->
<div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
    <!-- LEFT SIDE / TASK DETAIL SECTION -->
    <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
        {% if project.status == 'Completed' %}
        <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-2">
            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
            <p class="text-white text-base">{{project.project_id}}</p>
        </div>
        {% endif %}
        {% if project.status == 'Cancelled' %}
        <div class="w-full  bg-red-500 rounded-t-md flex flex-col justify-center items-center py-2">
            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
            <p class="text-white text-base">{{project.project_id}}</p>
        </div>
        {% endif %}
        {% if project.status == 'Active' %}
        <div class="w-full  bg-orange-500 rounded-t-md flex flex-col justify-center items-center py-2">
            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
            <p class="text-white text-base">{{project.project_id}}</p>
        </div>
        {% endif %}
        {% if project.status == 'Pending' %}
        <div class="w-full bg-yellow-400 rounded-t-md flex flex-col justify-center items-center py-2">
            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
            <p class="text-white text-base">{{project.project_id}}</p>
        </div>
        {% endif %}
        <div class="w-full h-[70px] flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
            <div class="flex justify-start items-center gap-3">
                <a href="{% url 'createepic' %}">
                    <button
                        class="w-fit text-base px-3 py-2 bg-transparent text-blue-500 outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white">Create
                        Epic</button>
                </a>
                <a href="{% url 'createtaskproject' project.project_id  %}">
                    <button
                        class="w-fit text-base px-3 py-2 bg-transparent text-blue-500 outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white">Create
                        Task</button>
                </a>
                <button
                    class="w-fit text-base px-3 py-2 bg-transparent text-blue-500 outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white">Create
                    Story</button>
                <button
                    class="w-fit text-base px-3 py-2 bg-transparent text-blue-500 outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white">Create
                    Milestone</button>
            </div>
            <div class="flex justify-end items-center gap-3">
                <button
                    class="w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
                    Project</button>
                <button
                    class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
                    Project</button>
            </div>
        </div>
        <div class="w-full flex flex-col gap-4 mt-5">
            <div>
                <p class="text-gray-500 text-xl">Client: <span
                        class="text-slate-800 text-xl font-semibold">{{project.customer.first_name}}
                        {{project.customer.last_name}}</span></p>
            </div>

            <div>
                <p class="text-gray-500 text-xl">Project Manager: <span
                        class="text-slate-800 text-xl font-semibold">{{project.manager.first_name}}
                        {{project.manager.last_name}}</span></p>
            </div>


            <div>
                <p class="text-gray-500 text-xl">Member(s):
                    {% for member in project.members.all %}
                    <span class="text-slate-800 text-xl font-semibold">
                        {{member.first_name}} {{member.last_name}} {% if not forloop.last %}, {% endif %}
                        {% endfor %}</span>
                </p>
            </div>

            <div>
                <p class="text-gray-500 text-xl">Type:
                    {% for type in project.project_type.all %}
                    <span class="text-slate-800 text-xl font-semibold">
                        {{type.name}} {% if not forloop.last %}, {% endif %}
                        {% endfor %}</span>
                </p>
            </div>

            <div>
                <p class="text-gray-500 text-xl">Status:
                    {% if project.status == 'Cancelled' %}
                    <span class="text-red-500 text-xl font-semibold">{{project.status}}</span>
                    {% endif %}
                    {% if project.status == 'Completed' %}
                    <span class="text-green-700 text-xl font-semibold">{{project.status}}</span>
                    {% endif %}
                    {% if project.status == 'Active' %}
                    <span class="text-orange-500 text-xl font-semibold">{{project.status}}</span>
                    {% endif %}
                    {% if project.status == 'Pending' %}
                    <span class="text-yellow-400 text-xl font-semibold">{{project.status}}</span>
                    {% endif %}
                </p>
            </div>

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

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

            <!-- PROJECT DETAILS -->
            <div>
                <div>
                    <p class="text-gray-500 text-xl">Project Details:</p>
                    <div class="w-full px-8">
                        <p class="text-gray-500">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt repellendus temporibus et
                            voluptas! Mollitia error suscipit sint voluptatum perferendis earum nesciunt fuga
                            laudantium, sapiente ex deleniti velit, quod odio corporis?
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem perspiciatis
                            molestias inventore delectus atque praesentium voluptatem itaque, aspernatur et nesciunt
                            dolorum omnis dolor. Aliquid natus ab laudantium pariatur porro. Consectetur!
                        </p>
                    </div>
                </div>
            </div>

            <!-- REQUIREMENTS -->

            <div>
                <p class="text-gray-500 text-xl">Requirements:</p>
                <div class="w-full px-8">
                    <ul class="list-disc text-slate-800">
                        {% for requirement in project.projectrequirement_set.all %}
                        <li>{{requirement.content}}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <!-- RELATED FILES -->
            {% if project.projectfile_set.all %}
            <div>
                <p class="text-gray-500 text-xl">Related Files:</p>
                <div class="w-full px-4">
                    <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
                        <!-- HEADER -->
                        <div class="w-full h-[60px] flex items-center justify-between">
                            <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
                                <p class="text-sm">File Name</p>
                            </div>
                            <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
                                <p class="text-sm">File</p>
                            </div>
                            <div class="w-[25%] h-full flex justify-center items-center">
                                <p class="text-sm">Date Entered</p>
                            </div>
                        </div>

                        <!-- BODY -->
                        <div class="w-full border-t border-gray-300">
                            <!-- ROW -->
                            {% for file in project.projectfile_set.all %}
                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
                                <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
                                    <p class="text-sm">{{file.name}}</p>
                                </div>
                                <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
                                    <p class="text-sm">{{file.file}}</p>
                                </div>
                                <div class="w-[25%] h-full flex justify-center items-center">
                                    <p class="text-sm">{{file.date}}</p>
                                </div>
                            </div>
                            {%endfor%}
                        </div>
                        <div class="w-full">
                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100"
                                id="addFileButton" data-modal-url="{% url 'addfile' %}">ADD FILE</button>
                        </div>
                    </div>
                </div>
            </div>
            {%endif%}

            <!-- CREDENTIALS -->
            {% if project.projectcredential_set.all %}
            <div>
                <p class="text-gray-500 text-xl">Credentials:</p>
                <div class="w-full px-4">
                    <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
                        <!-- HEADER -->
                        <div class="w-full h-[60px] flex items-center justify-between">
                            <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
                                <p class="text-sm">Email or Username</p>
                            </div>
                            <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
                                <p class="text-sm">Password</p>
                            </div>
                            <div class="w-[25%] h-full flex justify-center items-center">
                                <p class="text-sm">Used for</p>
                            </div>
                        </div>

                        <!-- BODY -->
                        <div class="w-full border-t border-gray-300">
                            <!-- ROW -->
                            {% for credential in project.projectcredential_set.all %}
                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
                                <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
                                    <p class="text-sm">{{credential.emailorusername}}</p>
                                </div>
                                <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
                                    <p class="text-sm">{{credential.password}}</p>
                                </div>
                                <div class="w-[25%] h-full flex justify-center items-center">
                                    <p class="text-sm">{{credential.usedfor}}</p>
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <div class="w-full">
                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100"
                                id="addCredentialsButton" data-modal-url="{% url 'addcredentials' %}">ADD
                                CREDENTIALS</button>
                        </div>

                    </div>
                </div>
            </div>
            {%endif%}

            <!-- TAGS -->
            <div>
                <p class="text-gray-500 text-xl mt-5">Tags:</p>
                <div class="w-full h-fit px-4 mt-1 flex flex-wrap justify-start items-center gap-3">
                    <button
                        class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none cursor-pointer">Media
                        Streaming</button>

                    <button
                        class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none cursor-pointer">Live
                        Streaming</button>

                    <button
                        class="text-sm text-gray-400 border border-gray-400 rounded-md w-fit py-2 px-3 outline-none cursor-pointer">Audio
                        On Demand</button>
                </div>
            </div>

            <!-- RELATED TASK CONTAINER BASED ON THE CHOSEN EPIC -->
            <div class="w-full mt-5">
                <div class="w-full bg-slate-300 rounded-md shadow-md h-fit p-5 flex justify-between items-center">
                    <div>
                        <select id="epicSelect"
                            class="w-[250px] rounded-md border border-gray-300 p-3 outline-none text-gray-500 cursor-pointer">
                            <option selected disabled>EPICS</option>
                            <option>Epic 1</option>
                            <option>Epic 2</option>
                            <option>Epic 3</option>
                            <option>Epic 4</option>
                        </select>
                    </div>
                    <div class="w-full flex justify-end gap-[3%] pl-5">
                        <div class="w-[50%] justify-start items-center gap-2 hidden" id="epicDetails">
                            <p class="text-gray-500 font-light">Start Date: <span class="text-slate-800">1/2/2023</span>
                            </p>
                            <p class="text-gray-500 font-light">End Date: <span class="text-slate-800">1/3/2023</span>
                            </p>
                        </div>
                        <div class="w-[50%] flex justify-end items-center gap-2">
                            <a href="{% url 'createepic' %}">
                                <button
                                    class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md hover:bg-transparent hover:text-blue-500 duration-300">Create
                                    Epic</button>
                            </a>
                            <a href="{% url 'createtaskepic' %}">
                                <button id="createTaskButton"
                                    class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
                                    disabled>Create
                                    Task</button>
                            </a>
                            <button id="createStoryButton"
                                class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
                                disabled>Create
                                Story</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="w-full px-4 hidden" id="epicRelatedTasks">
                <div class="w-full p-3 bg-white rounded-md shadow-lg">
                    <p class="text-gray-500 text-xl">Related Tasks:</p>
                    <!-- TASK 1 -->
                    <div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3">
                        <!-- TABLE HEADER -->
                        <div class="w-full flex h-[70px] rounded-t-md">
                            <div
                                class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
                                <p class="text-xl text-white">Task Name</p>
                            </div>
                            <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
                                <p class="text-xl text-slate-700">Open</p>
                            </div>
                            <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
                                <p class="text-xl text-slate-700">1/2/2021</p>
                            </div>
                            <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
                                <p class="text-xl text-slate-700">1/2/2022</p>
                            </div>
                        </div>

                        <!-- TABLE BODY -->
                        <div class="w-full h-fit flex">
                            <!-- LEFT SIDE OF TABLE BODY -->
                            <div class="w-[55%] 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">Osina Project</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">epic</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">Nataly</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">Documentation.pdf, Project.doc
                                        </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">Live Streaming, Media Streaming
                                        </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">Yes</p>
                                    </div>
                                </div>
                            </div>

                            <!-- RIGHT SIDE OF TABLE BODY -->
                            <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
                                    id="updateStatusButton">Update
                                    Status</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
                                    id="addTimeButton">Add
                                    Time</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
                                    id="deleteTaskButton">Delete</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
                                    id="showPointsButton">Show
                                    Points</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
                                    id="addPointButton">Add
                                    Point</button>
                                <a href="./task-details.html" class="w-[33.33%]">
                                    <button
                                        class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
                                </a>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
                                    id="timelineButton">Timline</button>
                            </div>
                        </div>
                    </div>

                    <!-- TASK 2 -->
                    <div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3">
                        <!-- TABLE HEADER -->
                        <div class="w-full flex h-[70px] rounded-t-md">
                            <div
                                class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
                                <p class="text-xl text-white">Task Name</p>
                            </div>
                            <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
                                <p class="text-xl text-slate-700">Open</p>
                            </div>
                            <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
                                <p class="text-xl text-slate-700">1/2/2021</p>
                            </div>
                            <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
                                <p class="text-xl text-slate-700">1/2/2022</p>
                            </div>
                        </div>

                        <!-- TABLE BODY -->
                        <div class="w-full h-fit flex">
                            <!-- LEFT SIDE OF TABLE BODY -->
                            <div class="w-[55%] 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">Osina Project</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">epic</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">Nataly</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">Documentation.pdf, Project.doc
                                        </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">Live Streaming, Media Streaming
                                        </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">Yes</p>
                                    </div>
                                </div>
                            </div>

                            <!-- RIGHT SIDE OF TABLE BODY -->
                            <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
                                    id="updateStatusButton">Update
                                    Status</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
                                    id="addTimeButton">Add
                                    Time</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
                                    id="deleteTaskButton">Delete</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
                                    id="showPointsButton">Show
                                    Points</button>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
                                    id="addPointButton">Add
                                    Point</button>
                                <a href="./task-details.html" class="w-[33.33%]">
                                    <button
                                        class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
                                </a>
                                <button
                                    class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
                                    id="timelineButton">Timline</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-10 flex flex-col justify-center items-center w-full">
                <p class="text-xl text-gray-500">Total Extra Task Time : <span class="text-slate-800 font-semibold">46
                        hrs and 50 min</span></p>
                <p class="text-xl text-gray-500">Total Task Time : <span class="text-slate-800 font-semibold">240 hrs
                        and 40 min</span></p>
            </div>
        </div>
    </div>
    <!-- RIGHT SIDE / USERS ACTIVITY -->
    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
        <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
        <div class="w-full h-[300px] mt-2">


            <!-- 1ST ROW -->
            <div class="w-full flex flex-col py-3">
                <div class="w-full flex flex-col justify-center items-start gap-2">
                    <div class="w-full flex justify-between items-center gap-2">
                        <div class="flex justify-start gap-2">
                            <div class="w-[45px] h-[45px] rounded-full">
                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
                                    class="w-full h-full object-cover">
                            </div>
                            <div class="flex flex-col">
                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
                                <p class="text-sm text-gray-500">11:30 AM</p>
                            </div>
                        </div>
                        <div class="cursor-pointer">
                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="w-full">
                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
                    </div>

                    <!-- Add comment section -->
                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
                        <input type="text" placeholder="Add Comment..."
                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 2NT ROW -->
            <div class="w-full flex flex-col py-3">
                <div class="w-full flex flex-col justify-center items-start gap-2">
                    <div class="w-full flex justify-between items-center gap-2">
                        <div class="flex justify-start gap-2">
                            <div class="w-[45px] h-[45px] rounded-full">
                                <img src='{% static "images/avatar2.png" %}' alt="user profile"
                                    class="w-full h-full object-cover">
                            </div>
                            <div class="flex flex-col">
                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
                                <p class="text-sm text-gray-500">11:30 AM</p>
                            </div>
                        </div>
                        <div class="cursor-pointer">
                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="w-full">
                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
                    </div>

                    <!-- Add comment section -->
                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
                        <input type="text" placeholder="Add Comment..."
                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 3RD ROW -->
            <div class="w-full flex flex-col py-3">
                <div class="w-full flex flex-col justify-center items-start gap-2">
                    <div class="w-full flex justify-between items-center gap-2">
                        <div class="flex justify-start gap-2">
                            <div class="w-[45px] h-[45px] rounded-full">
                                <img src='{% static "images/avatar3.png" %}' alt="user profile"
                                    class="w-full h-full object-cover">
                            </div>
                            <div class="flex flex-col">
                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
                                <p class="text-sm text-gray-500">11:30 AM</p>
                            </div>
                        </div>
                        <div class="cursor-pointer">
                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="w-full">
                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
                    </div>

                    <!-- Add comment section -->
                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
                        <input type="text" placeholder="Add Comment..."
                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 4TH ROW -->
            <div class="w-full flex flex-col py-3">
                <div class="w-full flex flex-col justify-center items-start gap-2">
                    <div class="w-full flex justify-between items-center gap-2">
                        <div class="flex justify-start gap-2">
                            <div class="w-[45px] h-[45px] rounded-full">
                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
                                    class="w-full h-full object-cover">
                            </div>
                            <div class="flex flex-col">
                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
                                <p class="text-sm text-gray-500">11:30 AM</p>
                            </div>
                        </div>
                        <div class="cursor-pointer">
                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="w-full">
                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
                    </div>

                    <!-- Add comment section -->
                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
                        <input type="text" placeholder="Add Comment..."
                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
            id="closeModalButton">
            <i class="fa fa-close"></i>
        </button>
        <iframe id="popupModalFrame" frameborder="0"></iframe>
    </div>
</div>
<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
</div>


<!---------------------- JS SCRIPTS -------------------->

<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>

<!-- THE SCRIPT FOR THE EPICS BAR -->
<script type="text/javascript" src='{% static "js/epics.js" %}'></script>
{% endblock content %}