{% extends "main.html" %}
{%load static%}
{% block content %}
            <!-- 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">
                                <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>

            <!-- TASK DETAIL AND USERS ACTIVITY SECTION -->
            <div class="w-full flex 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">
                    <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-3">
                        <h1 class="text-3xl text-white font-semibold">Task Name</h1>
                    </div>
                    <div class="w-full h-[70px] flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
                        <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
                                Task</button>
                        <a href="{% url 'edittask' %}">
                            <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
                                Task</button>
                            </a>
                        </div>
                    </div>
                    <div class="w-full flex flex-col gap-4 mt-5">
                        <div>
                            <p class="text-gray-500 text-xl">Project: <span
                                    class="text-slate-800 text-xl font-semibold">Osina</span></p>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">Start Date: <span
                                    class="text-slate-800 text-xl font-semibold">1/2/1023</span></p>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">End Date: <span
                                    class="text-slate-800 text-xl font-semibold">15/2/1023</span></p>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">Epic: <span
                                    class="text-slate-800 text-xl font-semibold">epic</span></p>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">Assigned To: <span
                                    class="text-slate-800 text-xl font-semibold">Nataly</span></p>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">Extra: <span
                                    class="text-slate-800 text-xl font-semibold">Yes</span></p>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">Status: <span
                                    class="text-green-700 text-xl font-semibold">Open</span></p>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">Related Files: <span
                                    class="text-slate-800 text-xl">Documentation.pdf, Project.doc</span>
                            </p>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">Points:</p>
                            <div class="w-full px-4">
                                <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
                                    <div class="w-[380px]">
                                        <p class="text-slate-800">Fix the LaylNhar Header Lorem ipsum dolor sit amet consectetur,
                                            adipisicing elit. Mollitia, dolorum. Earum error atÍb dol</p>
                                    </div>
                                    <div class="flex justify-end items-center gap-2">
                                        <button
                                            class="w-[120px] px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
                                        <button
                                            class="w-[120px] px-2 py-1 bg-transparent border border-yellow-500 rounded-md text-yellow-500 hover:bg-yellow-500 hover:text-white">Working
                                            On</button>
                                    </div>
                                </div>
                    
                                <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
                                    <div class="w-[380px]">
                                        <p class="text-slate-800">Fix the LaylNhar Header</p>
                                    </div>
                                    <div class="flex justify-end items-center gap-2">
                                        <button
                                            class="w-[120px] px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
                                        <button
                                            class="w-[120px] px-2 py-1 border border-yellow-500 rounded-md bg-yellow-500 text-white opacity-40"
                                            disabled>Working On</button>
                                    </div>
                                </div>
                    
                                <div class="w-full flex justify-between items-center py-2">
                                    <div class="w-[380px]">
                                        <p class="text-slate-800 line-through">Fix the LaylNhar Header Lorem ipsum dolor sit amet
                                            consectetur
                                            adipisicing elit. Autem sit esse, cupiditate voluptas, dolorem nisi sunt, molestiae eaque neque
                                            cumque ex amet! Sequi aliquid quos ullam, sapiente iste impedit explicabo?</p>
                                    </div>
                                    <div class="w-[150px]">
                                        <button class="w-full px-2 py-1 bg-blue-500 border border-blue-500 rounded-md text-white opacity-40"
                                            value="Completed" disabled>Completed</button>
                                    </div>
                                </div>
                            </div>

                            <div class="w-full px-4">
                                <button class="w-full text-gray-500 py-3 bg-gray-100 addPointButton" data-modal-url="{% url 'addpoint' %}">ADD POINT</button>
                                </button>
                            </div>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">Timeline:</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-[30%] h-full border-r border-gray-300 flex justify-center items-center">
                                            <p class="text-sm">Task Time: <span class="text-sm text-gray-500">560
                                                    minutes</span></p>
                                        </div>
                                        <div
                                            class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                            <p class="text-sm">User</p>
                                        </div>
                                        <div
                                            class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                            <p class="text-sm">Date</p>
                                        </div>
                                        <div class="w-[20%] h-full flex justify-center items-center">
                                            <p class="text-sm">Total Time</p>
                                        </div>
                                    </div>

                                    <!-- BODY -->
                                    <div class="w-full border-t border-gray-300">
                                        <!-- 1ST ROW -->
                                        <div
                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
                                            <div
                                                class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <button
                                                    class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
                                            </div>
                                            <div
                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <p class="text-sm">Nataly</p>
                                            </div>
                                            <div
                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <p class="text-sm">6-9-2023</p>
                                            </div>
                                            <div class="w-[20%] h-full flex justify-center items-center">
                                                <p class="text-sm">360 minutes</p>
                                            </div>
                                        </div>

                                        <!-- 2ND ROW -->
                                        <div
                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
                                            <div
                                                class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <button
                                                    class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
                                            </div>
                                            <div
                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <p class="text-sm">Salim</p>
                                            </div>
                                            <div
                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <p class="text-sm">12-9-2023</p>
                                            </div>
                                            <div class="w-[20%] h-full flex justify-center items-center">
                                                <p class="text-sm">200 minutes</p>
                                            </div>
                                        </div>

                                        <!-- 3RD ROWS -->
                                        <div
                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
                                            <div
                                                class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <button
                                                    class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
                                            </div>
                                            <div
                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <p class="text-sm">Salim</p>
                                            </div>
                                            <div
                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <p class="text-sm">12-9-2023</p>
                                            </div>
                                            <div class="w-[20%] h-full flex justify-center items-center">
                                                <p class="text-sm">200 minutes</p>
                                            </div>
                                        </div>

                                        <!-- 4TH ROW -->
                                        <div
                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
                                            <div
                                                class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <button
                                                    class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
                                            </div>
                                            <div
                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <p class="text-sm">Reine</p>
                                            </div>
                                            <div
                                                class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
                                                <p class="text-sm">12-9-2023</p>
                                            </div>
                                            <div class="w-[20%] h-full flex justify-center items-center">
                                                <p class="text-sm">200 minutes</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="w-full">
                                        <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100 addTimeButton" data-modal-url="{% url 'addtime' %}">ADD TIMELINE</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">Description:</p>
                            <div class="w-full h-fit px-4 mt-1">
                                <p class="text-slate-700">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                    Lorem Ipsum has been the industry's standard dummy text ever since the
                                    1500s, when an unknown printer took a galley of type and scrambled it to
                                    make a type specimen book. It has survived not only five centuries, but also
                                    the leap into electronic typesetting, remaining essentially unchanged. It
                                    was popularised in the 1960s with the release of Letraset sheets containing
                                    Lorem Ipsum passages, and more recently with desktop publishing software
                                    like Aldus PageMaker including versions of Lorem Ipsum.
                                </p>
                            </div>
                        </div>

                        <div>
                            <p class="text-gray-500 text-xl">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>

                    </div>
                </div>
                <!-- RIGHT SIDE / USERS ACTIVITY -->
                <div class="w-[23%] bg-white h-fit 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-fit mt-2">

                        <div class="w-full flex flex-col py-3">
                            <div class="w-full flex justify-start gap-2 items-center">
                                <div class="w-[45px] h-[45px] rounded-full">
                                    <img src="../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>
                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
                                </div>
                                <div class="cursor-pointer">
                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                                </div>
                            </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 class="w-full flex flex-col py-3">
                            <div class="w-full flex justify-start gap-2 items-center">
                                <div class="w-[45px] h-[45px] rounded-full">
                                    <img src="../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>
                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
                                </div>
                                <div class="cursor-pointer">
                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                                </div>
                            </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 class="w-full flex flex-col py-3">
                            <div class="w-full flex justify-start gap-2 items-center">
                                <div class="w-[45px] h-[45px] rounded-full">
                                    <img src="../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">12:30 PM</p>
                                    <p class="text-sm text-gray-500">Working - Create the Osina home page</p>
                                </div>
                                <div class="cursor-pointer">
                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                                </div>
                            </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 class="w-full flex flex-col py-3">
                            <div class="w-full flex justify-start gap-2 items-center">
                                <div class="w-[45px] h-[45px] rounded-full">
                                    <img src="../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>
                                    <p class="text-sm text-gray-500">Closed - Create Enooma home page</p>
                                </div>
                                <div class="cursor-pointer">
                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                                </div>
                            </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 class="w-full flex flex-col py-3">
                            <div class="w-full flex justify-start gap-2 items-center">
                                <div class="w-[45px] h-[45px] rounded-full">
                                    <img src="../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>
                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
                                </div>
                                <div class="cursor-pointer">
                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                                </div>
                            </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>

        <!-- 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>
{% endblock content %}