<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Templates - Implementation Status</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            color: #ffffff;
            margin-bottom: 40px;
        }
        
        .header h1 {
            font-size: 42px;
            margin-bottom: 15px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .header p {
            font-size: 20px;
            opacity: 0.95;
        }
        
        .status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }
        
        .status-card {
            background: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        
        .status-header {
            padding: 25px;
            background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
            color: #ffffff;
        }
        
        .status-header h3 {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        .status-header p {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .status-body {
            padding: 25px;
        }
        
        .template-list {
            list-style: none;
        }
        
        .template-item {
            padding: 15px;
            margin-bottom: 15px;
            background: #f8fafc;
            border-radius: 8px;
            border-left: 4px solid #005696;
        }
        
        .template-name {
            font-weight: 600;
            color: #005696;
            margin-bottom: 5px;
            font-size: 16px;
        }
        
        .template-path {
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: #64748b;
            margin-bottom: 8px;
        }
        
        .template-integration {
            font-size: 13px;
            color: #1e293b;
            line-height: 1.5;
        }
        
        .template-integration strong {
            color: #005696;
        }
        
        .color-section {
            background: #ffffff;
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        
        .color-section h2 {
            color: #005696;
            margin-bottom: 25px;
            font-size: 24px;
        }
        
        .colors-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
        }
        
        .color-swatch {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .color-preview {
            height: 120px;
            width: 100%;
        }
        
        .color-info {
            padding: 15px;
            background: #ffffff;
        }
        
        .color-name {
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 5px;
            font-size: 14px;
        }
        
        .color-hex {
            font-family: 'Courier New', monospace;
            color: #64748b;
            font-size: 13px;
        }
        
        .integration-section {
            background: #ffffff;
            border-radius: 16px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        
        .integration-section h2 {
            color: #005696;
            margin-bottom: 25px;
            font-size: 24px;
        }
        
        .integration-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .integration-card {
            padding: 20px;
            background: #f8fafc;
            border-radius: 8px;
            border-left: 4px solid #005696;
        }
        
        .integration-card h4 {
            color: #005696;
            margin-bottom: 10px;
            font-size: 16px;
        }
        
        .integration-card code {
            display: block;
            background: #1e293b;
            color: #007bbd;
            padding: 12px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            margin-top: 10px;
            overflow-x: auto;
        }

        .footer {
            text-align: center;
            color: #ffffff;
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }

        .badge {
            display: inline-block;
            padding: 4px 12px;
            background: #005696;
            color: #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            margin-left: 10px;
        }
        
        @media (max-width: 768px) {
            .status-grid {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 32px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <h1>🏥 Email Template System</h1>
            <p>Al Hammadi Hospital - Unified Brand Identity</p>
        </div>
        
        <!-- Color Palette -->
        <div class="color-section">
            <h2>🎨 Brand Color Palette</h2>
            <div class="colors-grid">
                <div class="color-swatch">
                    <div class="color-preview" style="background: #005696;"></div>
                    <div class="color-info">
                        <div class="color-name">Primary Navy</div>
                        <div class="color-hex">#005696</div>
                    </div>
                </div>
                <div class="color-swatch">
                    <div class="color-preview" style="background: #007bbd;"></div>
                    <div class="color-info">
                        <div class="color-name">Accent Blue</div>
                        <div class="color-hex">#007bbd</div>
                    </div>
                </div>
                <div class="color-swatch">
                    <div class="color-preview" style="background: #eef6fb;"></div>
                    <div class="color-info">
                        <div class="color-name">Light Background</div>
                        <div class="color-hex">#eef6fb</div>
                    </div>
                </div>
                <div class="color-swatch">
                    <div class="color-preview" style="background: #64748b;"></div>
                    <div class="color-info">
                        <div class="color-name">Slate Gray</div>
                        <div class="color-hex">#64748b</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Status Grid -->
        <div class="status-grid">
            <!-- Patient Templates -->
            <div class="status-card">
                <div class="status-header">
                    <h3>👥 Patient-Facing Templates</h3>
                    <p>Emails sent to patients</p>
                </div>
                <div class="status-body">
                    <ul class="template-list">
                        <li class="template-item">
                            <div class="template-name">Survey Invitation</div>
                            <div class="template-path">templates/emails/survey_invitation.html</div>
                            <div class="template-integration">
                                <strong>Usage:</strong> Sent after patient visits for feedback collection
                            </div>
                        </li>
                        <li class="template-item">
                            <div class="template-name">Appointment Confirmation</div>
                            <div class="template-path">templates/emails/appointment_confirmation.html</div>
                            <div class="template-integration">
                                <strong>Usage:</strong> Sent when appointments are booked
                            </div>
                        </li>
                        <li class="template-item">
                            <div class="template-name">Survey Results Notification</div>
                            <div class="template-path">templates/emails/survey_results_notification.html</div>
                            <div class="template-integration">
                                <strong>Usage:</strong> Department heads notified of survey results
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Staff Templates -->
            <div class="status-card">
                <div class="status-header">
                    <h3>👨‍⚕️ Staff/Admin Templates</h3>
                    <p>Internal communication emails</p>
                </div>
                <div class="status-body">
                    <ul class="template-list">
                        <li class="template-item">
                            <div class="template-name">Explanation Request <span class="badge">INTEGRATED</span></div>
                            <div class="template-path">templates/emails/explanation_request.html</div>
                            <div class="template-integration">
                                <strong>Integration:</strong> apps/complaints/tasks.py<br>
                                <strong>Function:</strong> send_explanation_request_email()
                            </div>
                        </li>
                        <li class="template-item">
                            <div class="template-name">User Invitation <span class="badge">INTEGRATED</span></div>
                            <div class="template-path">templates/accounts/onboarding/invitation_email.html</div>
                            <div class="template-integration">
                                <strong>Integration:</strong> apps/accounts/services.py<br>
                                <strong>Function:</strong> EmailService.send_invitation_email()
                            </div>
                        </li>
                        <li class="template-item">
                            <div class="template-name">Invitation Reminder <span class="badge">INTEGRATED</span></div>
                            <div class="template-path">templates/accounts/onboarding/reminder_email.html</div>
                            <div class="template-integration">
                                <strong>Integration:</strong> apps/accounts/services.py<br>
                                <strong>Function:</strong> EmailService.send_reminder_email()
                            </div>
                        </li>
                        <li class="template-item">
                            <div class="template-name">Onboarding Completion <span class="badge">INTEGRATED</span></div>
                            <div class="template-path">templates/accounts/onboarding/completion_email.html</div>
                            <div class="template-integration">
                                <strong>Integration:</strong> apps/accounts/services.py<br>
                                <strong>Function:</strong> EmailService.send_completion_notification()
                            </div>
                        </li>
                        <li class="template-item">
                            <div class="template-name">Password Reset <span class="badge">INTEGRATED</span></div>
                            <div class="template-path">templates/accounts/email/password_reset_email.html</div>
                            <div class="template-integration">
                                <strong>Integration:</strong> Django Authentication System
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Integration Points -->
        <div class="integration-section">
            <h2>🔌 Integration Points</h2>
            <div class="integration-grid">
                <div class="integration-card">
                    <h4>Complaints System</h4>
                    <p style="color: #64748b; font-size: 14px; margin-bottom: 10px;">apps/complaints/tasks.py</p>
                    <code>send_explanation_request_email(explanation_id)</code>
                    <p style="color: #64748b; font-size: 13px; margin-top: 10px;">
                        Sends branded explanation request emails to staff when complaints are filed.
                    </p>
                </div>
                
                <div class="integration-card">
                    <h4>Accounts Service</h4>
                    <p style="color: #64748b; font-size: 14px; margin-bottom: 10px;">apps/accounts/services.py</p>
                    <code>EmailService.send_*_email()</code>
                    <p style="color: #64748b; font-size: 13px; margin-top: 10px;">
                        All onboarding emails (invitation, reminder, completion) use branded templates.
                    </p>
                </div>
                
                <div class="integration-card">
                    <h4>Notifications Service</h4>
                    <p style="color: #64748b; font-size: 14px; margin-bottom: 10px;">apps/notifications/services.py</p>
                    <code>NotificationService.send_email()</code>
                    <p style="color: #64748b; font-size: 13px; margin-top: 10px;">
                        Unified email service with HTML support and database logging.
                    </p>
                </div>
                
                <div class="integration-card">
                    <h4>Base Template</h4>
                    <p style="color: #64748b; font-size: 14px; margin-bottom: 10px;">templates/emails/</p>
                    <code>{% extends 'emails/base_email_template.html' %}</code>
                    <p style="color: #64748b; font-size: 13px; margin-top: 10px;">
                        All email templates extend the base template for consistent branding.
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="footer">
            <p><strong>Al Hammadi Hospital Email Template System</strong></p>
            <p>Patient Experience Management Department</p>
            <p style="margin-top: 15px; opacity: 0.8; font-size: 14px;">
                Created on March 12, 2026
            </p>
            <p style="margin-top: 10px; opacity: 0.7; font-size: 13px;">
                Documentation: templates/emails/README_EMAIL_TEMPLATES.md
            </p>
        </div>
    </div>
</body>
</html>
