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

{% block title %}Direct Communication - 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>💬 Direct Communication</h2>
    <p style="font-size:1.1rem;color:#666;margin-bottom:1.5rem;">Message your healthcare team and family members directly within the application.</p>
    
    <h3>Communication Features</h3>
    <ul style="line-height:1.8;color:#555;">
        <li><strong>Secure Messaging:</strong> HIPAA-compliant encrypted messages with doctors and family</li>
        <li><strong>Video Consultations:</strong> Schedule and conduct video visits with your healthcare providers</li>
        <li><strong>Message History:</strong> Keep organized records of all conversations</li>
        <li><strong>File Sharing:</strong> Securely share documents, test results, and images</li>
        <li><strong>Group Chat:</strong> Create care team groups for coordinated communication</li>
        <li><strong>Response Times:</strong> Track how quickly your providers respond to messages</li>
    </ul>
    
    <h3 style="margin-top:2rem;">Communication Types</h3>
    <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>📧 Messages</strong><br>
            <small style="color:#666;">Send and receive text messages</small>
        </div>
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;">
            <strong>📞 Calls</strong><br>
            <small style="color:#666;">Voice and video calls with providers</small>
        </div>
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;">
            <strong>📎 Attachments</strong><br>
            <small style="color:#666;">Share documents and medical images</small>
        </div>
        <div style="padding:1rem;background:#f9f9f9;border-radius:4px;">
            <strong>⏰ Scheduling</strong><br>
            <small style="color:#666;">Schedule appointments within chats</small>
        </div>
    </div>
    
    <h3 style="margin-top:2rem;">Best Practices</h3>
    <ul style="line-height:1.8;color:#555;">
        <li>Use messages for non-emergency questions and updates</li>
        <li>For emergencies, call 911 or your local emergency number</li>
        <li>Keep messages professional and concise</li>
        <li>Expect responses within 24-48 hours during business hours</li>
        <li>Use file attachments for documents instead of typing them out</li>
    </ul>
    
    <div style="margin-top:2rem;padding:1rem;background:#f0f8ff;border-left:4px solid #667eea;border-radius:4px;">
        <strong>Send a Message</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">Send</button>
            </form>
        {% else %}
            <a href="{% url 'familytouch:home' %}" class="btn" style="margin-left:1rem;">Back to Home</a>
        {% endif %}
    </div>
</div>
{% endblock %}