{% extends "base.html" %}
{% from "components/cards.html" import info_card %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Summary Report</h1>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
    {{ info_card("Today's Hours", "%.2f"|format(today_hours), "Logged today") }}
    {{ info_card("Week's Hours", "%.2f"|format(week_hours), "Logged this week") }}
    {{ info_card("Month's Hours", "%.2f"|format(month_hours), "Logged this month") }}
</div>

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <h2 class="text-lg font-semibold mb-4">Top Projects (Last 30 Days)</h2>
    <table class="w-full text-left">
        <thead>
            <tr>
                <th class="p-2">Project</th>
                <th class="p-2">Total Hours</th>
            </tr>
        </thead>
        <tbody>
            {% for stat in project_stats %}
            <tr class="border-b border-border-light dark:border-border-dark">
                <td class="p-2">{{ stat.project.name }}</td>
                <td class="p-2">{{ "%.2f"|format(stat.hours) }}</td>
            </tr>
            {% else %}
            <tr>
                <td colspan="2" class="p-4 text-center">No project data for the last 30 days.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}
