{% extends 'familytouch/base.html' %}

{% block title %}Health Tracking - FamilyTouch{% endblock %}

{% block content %}
<div style="max-width:800px;margin:2rem auto;background:white;padding:2rem;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.06);">
    <h2>📊 Health Tracking</h2>
    <p style="font-size:1.1rem;color:#666;margin-bottom:1.5rem;">Monitor vital signs, medications, and medical history all in one unified dashboard.</p>
    
    <h3>What You Can Track</h3>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1rem 0;margin-bottom:2rem;">
        <div style="padding:1rem;background:#f0f8ff;border-radius:4px;border-left:4px solid #667eea;">
            <strong>Vital Signs</strong>
            <ul style="margin:0.5rem 0;padding-left:1.5rem;font-size:0.95rem;color:#555;">
                <li>Blood pressure</li>
                <li>Heart rate</li>
                <li>Temperature</li>
                <li>Weight</li>
            </ul>
        </div>
        <div style="padding:1rem;background:#fff3cd;border-radius:4px;border-left:4px solid #ffc107;">
            <strong>Medications</strong>
            <ul style="margin:0.5rem 0;padding-left:1.5rem;font-size:0.95rem;color:#555;">
                <li>Active medications</li>
                <li>Dosage & frequency</li>
                <li>Side effects log</li>
                <li>Refill reminders</li>
            </ul>
        </div>
        <div style="padding:1rem;background:#e8f5e9;border-radius:4px;border-left:4px solid #4caf50;">
            <strong>Medical History</strong>
            <ul style="margin:0.5rem 0;padding-left:1.5rem;font-size:0.95rem;color:#555;">
                <li>Diagnoses</li>
                <li>Lab results</li>
                <li>Imaging records</li>
                <li>Past treatments</li>
            </ul>
        </div>
    </div>
    
    <h3>Smart Health Insights</h3>
    <ul style="line-height:1.8;color:#555;">
        <li><strong>Trend Analysis:</strong> See how your health changes over time with visual charts</li>
        <li><strong>Goal Tracking:</strong> Set and monitor health goals (weight, exercise, medication adherence)</li>
        <li><strong>Alerts:</strong> Automatic warnings when values are outside normal ranges</li>
        <li><strong>Integration:</strong> Connect wearables and fitness devices for automatic data syncing</li>
        <li><strong>Reports:</strong> Generate reports to share with your healthcare team</li>
    </ul>
    
    <div style="margin-top:2rem;padding:1rem;background:#f0f8ff;border-left:4px solid #667eea;border-radius:4px;">
        <strong>Record a Vital</strong>
        {% if user.is_authenticated %}
            {% if messages %}
                {% for m in messages %}
                    <div style="padding:0.5rem;background:#eef;margin-bottom:0.5rem;border-radius:4px;">{{ m }}</div>
                {% endfor %}
            {% endif %}
            <form method="post">
                {% csrf_token %}
                {{ form.as_p }}
                <button class="btn" type="submit">Save Vital</button>
            </form>
            <h4 style="margin-top:1rem;">Recent Vitals</h4>
            {% if vitals %}
                <ul>
                    {% for v in vitals %}
                        <li>{{ v.get_vital_type_display }}: {{ v.value }} {{ v.units }} <div style="color:#666;font-size:0.85rem;">{{ v.created_at|date:"M d, Y H:i" }}</div></li>
                    {% endfor %}
                </ul>
            {% else %}
                <p>No vitals recorded yet.</p>
            {% endif %}
        {% else %}
            <a href="{% url 'familytouch:home' %}" class="btn" style="margin-left:1rem;">Back to Home</a>
        {% endif %}
    </div>
</div>
{% endblock %}