{% extends "_layout.html" %}
{% block content %}
<div class="max-w-lg mx-auto bg-white p-8 rounded-lg shadow-md">
    <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">Edit Reading</h1>
    <form method="POST" action="{{ url_for('main.edit_reading', reading_id=reading.id) }}" novalidate>
        {{ form.hidden_tag() }}

        <!-- Timestamp Field -->
        <div class="mb-4">
            {{ form.timestamp.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.timestamp(class="w-full p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2
            focus:ring-blue-500 focus:border-blue-500") }}
            {% for error in form.timestamp.errors %}
            <p class="text-sm text-red-600 mt-1">{{ error }}</p>
            {% endfor %}
        </div>

        <!-- Systolic Field -->
        <div class="mb-4">
            {{ form.systolic.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.systolic(class="w-full p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2
            focus:ring-blue-500 focus:border-blue-500") }}
            {% for error in form.systolic.errors %}
            <p class="text-sm text-red-600 mt-1">{{ error }}</p>
            {% endfor %}
        </div>

        <!-- Diastolic Field -->
        <div class="mb-4">
            {{ form.diastolic.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.diastolic(class="w-full p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2
            focus:ring-blue-500 focus:border-blue-500") }}
            {% for error in form.diastolic.errors %}
            <p class="text-sm text-red-600 mt-1">{{ error }}</p>
            {% endfor %}
        </div>

        <!-- Heart Rate Field -->
        <div class="mb-4">
            {{ form.heart_rate.label(class="block text-sm font-medium text-gray-700") }}
            {{ form.heart_rate(class="w-full p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2
            focus:ring-blue-500 focus:border-blue-500") }}
            {% for error in form.heart_rate.errors %}
            <p class="text-sm text-red-600 mt-1">{{ error }}</p>
            {% endfor %}
        </div>

        <!-- Buttons -->
        <div class="flex justify-between items-center mt-6">
            <!-- Cancel Button -->
            <a href="{{ url_for('main.dashboard') }}" class="px-6 py-3 bg-gray-300 text-gray-700 rounded-lg shadow-sm
            hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-gray-400">
                Cancel
            </a>

            <!-- Submit Button -->
            <button type="submit"
                class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                Save Changes
            </button>
        </div>
    </form>
</div>
{% endblock %}