{% extends 'base_app.html' %}

{% block content %}

<h3 class="mb-4"><i class="bi bi-clock-history"></i> Vitals History</h3>

<div class="card shadow-sm border-0 p-4">

    {% if vitals %}
        <div class="table-responsive">
            <table class="table table-hover align-middle">

                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>BP</th>
                        <th>Heart Rate</th>
                        <th>Symptoms</th>
                    </tr>
                </thead>

                <tbody>
                    {% for v in vitals %}
                    <tr>
                        <td>{{ v.created_at|date:"Y-m-d H:i" }}</td>
                        <td>{{ v.systolic_bp }}/{{ v.diastolic_bp }}</td>
                        <td>{{ v.heart_rate }}</td>
                        <td>{{ v.symptoms }}</td>
                    </tr>
                    {% endfor %}
                </tbody>

            </table>
        </div>
    {% else %}
        <p class="text-muted">No vitals data available.</p>
    {% endif %}

</div>

{% endblock %}