{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Osina</title>

    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>

<body class="font-poppinsLight">
    <div id="hiddenContent">
        <h1 class="text-secondosiblue text-2xl font-semibold text-center mb-2">Timeline</h1>

        <div class="w-full border-t border-x border-gray-300 rounded-t-md">
            <!-- 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>

                <!-- 5TH 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">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>
    </div>
</body>

</html>