{% 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>
        <h1 class="text-secondosiblue text-2xl font-semibold text-center mb-2">Timeline</h1>

        <div class="overflow-x-auto border border-gray-300 rounded-md mt-5 tableContainer">
            <table class="min-w-full divide-y">
                <thead>
                    <tr>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase bg-gray-100 border-r border-gray-300 whitespace-nowrap">
                            Date</th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercasen bg-gray-100  whitespace-nowrap">
                            Total Time Worked</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for date, total_hours, total_minutes, total_seconds in formatted_totals %}
                    <tr>
                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ date }}</td>
                        <td class="px-6 py-4 text-center text-sm">    <p>
                            {% if total_hours == 1 %}
                                {{ total_hours }}hr,
                            {% else %}
                                {{ total_hours }}hrs,
                            {% endif %}
                            {% if total_minutes == 1 %}
                                {{ total_minutes }}min,
                            {% else %}
                                {{ total_minutes }}mins,
                            {% endif %}
                            {% if total_seconds == 1 %}
                                {{ total_seconds }}sec
                            {% else %}
                                {{ total_seconds }}secs
                            {% endif %}
                        </p></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>