{% extends "_layout.html" %}
{% block content %}
<div class="max-w-5xl mx-auto p-4 space-y-6">

    <!-- Header Section with "Add New Reading" Button -->
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
        <a href="{{ url_for('main.add_reading') }}"
            class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">
            + Add New Reading
        </a>
    </div>

    <!-- Weekly Summary -->
    <div class="bg-gradient-to-r from-blue-500 to-blue-700 text-white p-6 rounded-lg shadow-md">
        <h3 class="text-lg font-bold">Weekly Summary</h3>
        <div class="flex justify-between mt-4">
            <div>
                <p class="text-sm font-semibold">Systolic Average</p>
                <p class="text-2xl">{{ systolic_avg }} <span class="text-base">mmHg</span></p>
            </div>
            <div>
                <p class="text-sm font-semibold">Diastolic Average</p>
                <p class="text-2xl">{{ diastolic_avg }} <span class="text-base">mmHg</span></p>
            </div>
            <div>
                <p class="text-sm font-semibold">Heart Rate Average</p>
                <p class="text-2xl">{{ heart_rate_avg }} <span class="text-base">bpm</span></p>
            </div>
        </div>
    </div>

    <!-- Progress Badges -->
    <div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">Progress Badges</h3>
        <div class="flex flex-wrap gap-4">
            {% for badge in badges %}
            <div class="bg-green-100 text-green-800 px-4 py-2 rounded shadow text-sm font-medium">
                {{ badge }}
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Filter Form -->
    <form method="POST" action="{{ url_for('main.filter_dashboard') }}" class="p-4 bg-white rounded-lg shadow-md">
        <h3 class="text-lg font-bold text-gray-800 mb-4">Filter Readings</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
                <input type="date" name="start_date" id="start_date" class="w-full p-2 border rounded">
            </div>
            <div>
                <label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
                <input type="date" name="end_date" id="end_date" class="w-full p-2 border rounded">
            </div>
        </div>
        <div class="mt-4">
            <button type="submit" class="w-full md:w-auto bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">
                Apply Filters
            </button>
        </div>
    </form>

    <!-- Readings Table -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <table class="w-full bg-white rounded shadow border-collapse">
            <thead class="bg-gray-200">
                <tr>
                    <th class="p-2 text-left">Timestamp</th>
                    <th class="p-2 text-left">Systolic</th>
                    <th class="p-2 text-left">Diastolic</th>
                    <th class="p-2 text-left">Heart Rate</th>
                    <th class="p-2 text-left">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for reading in readings %}
                <tr class="border-t hover:bg-gray-100">
                    <td class="p-2">{{ reading.timestamp }}</td>
                    <td class="p-2">{{ reading.systolic }}</td>
                    <td class="p-2">{{ reading.diastolic }}</td>
                    <td class="p-2">{{ reading.heart_rate }}</td>
                    <td class="p-2">
                        <a href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
                            class="text-blue-600 hover:underline">Edit</a>
                        <form method="POST" action="{{ url_for('main.delete_reading', reading_id=reading.id) }}"
                            class="inline">
                            {{ delete_form.hidden_tag() }}
                            <button type="submit" class="text-red-600 hover:underline ml-2">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="p-2 text-center text-gray-500">No readings found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

    </div>
</div>
{% endblock %}