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

{% block title %}Real-Time Updates - 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>⚡ Real-Time Updates</h2>
    <p style="font-size:1.1rem;color:#666;margin-bottom:1.5rem;">Get instant notifications about appointments, medications, and important health updates.</p>
    
    <h3>Real-Time Features</h3>
    <ul style="line-height:1.8;color:#555;">
        <li><strong>Instant Notifications:</strong> Receive alerts the moment something happens</li>
        <li><strong>Appointment Reminders:</strong> Get reminders before scheduled appointments</li>
        <li><strong>Medication Alerts:</strong> Timely reminders to take your medications</li>
        <li><strong>Test Results:</strong> Instant notification when lab results are available</li>
        <li><strong>Care Team Messages:</strong> See incoming messages immediately</li>
        <li><strong>Emergency Alerts:</strong> Priority notifications for urgent health matters</li>
    </ul>
    
    <h3 style="margin-top:2rem;">Notification Preferences</h3>
    <p style="color:#555;">Customize how and when you receive notifications:</p>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0;">
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;">
            <strong>🔔 In-App</strong><br>
            See updates in your dashboard
        </div>
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;">
            <strong>📧 Email</strong><br>
            Email notifications for important updates
        </div>
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;">
            <strong>📱 Push</strong><br>
            Mobile push notifications on your device
        </div>
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;">
            <strong>💬 SMS</strong><br>
            Text message alerts for critical updates
        </div>
    </div>
    
    <div style="margin-top:2rem;padding:1rem;background:#f0f8ff;border-left:4px solid #667eea;border-radius:4px;">
        <strong>Post an Update</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">Post Update</button>
            </form>
            <h4 style="margin-top:1rem;">Recent Updates</h4>
            {% if updates %}
                <ul>
                    {% for u in updates %}
                        <li><strong>{{ u.sender.get_full_name|default:u.sender.username }}</strong>: {{ u.content }} <div style="color:#666;font-size:0.85rem;">{{ u.created_at|date:"M d, Y H:i" }}</div></li>
                    {% endfor %}
                </ul>
            {% else %}
                <p>No updates yet.</p>
            {% endif %}
        {% else %}
            <a href="{% url 'familytouch:home' %}" class="btn" style="margin-left:1rem;">Back to Home</a>
        {% endif %}
    </div>
</div>
{% endblock %}