<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ title }}</title>
    <style>
        /* Reset styles */
        body, table, td, p, a, li, blockquote {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        table, td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }
        img {
            -ms-interpolation-mode: bicubic;
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
        }

        /* Base styles */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f4f8;
            line-height: 1.6;
            color: #2d3748;
        }

        .email-wrapper {
            width: 100%;
            background-color: #f0f4f8;
            padding: 40px 20px;
        }

        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        /* Header with gradient */
        .email-header {
            background: linear-gradient(135deg, #00B4D8 0%, #0077B6 50%, #023E8A 100%);
            padding: 30px 40px;
            text-align: center;
        }

        .logo-container {
            margin-bottom: 20px;
        }

        .logo {
            max-width: 180px;
            height: auto;
        }

        .email-title {
            color: #ffffff;
            font-size: 24px;
            font-weight: 600;
            margin: 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Content area */
        .email-body {
            padding: 40px;
            background-color: #ffffff;
        }

        .email-content {
            color: #2d3748;
            font-size: 15px;
            line-height: 1.8;
        }

        .email-content p {
            margin: 0 0 12px 0;
        }

        .email-content h3 {
            display: block;
            color: #0077B6;
            font-size: 18px;
            font-weight: 600;
            margin: 24px 0 16px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid #e6f7fa;
        }

        .email-content ul {
            list-style: none;
            padding: 0;
            margin: 16px 0;
        }

        .email-content ul li {
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
        }

        .email-content ul li:last-child {
            border-bottom: none;
        }

        .email-content ul li:before {
            content: "•";
            color: #0077B6;
            font-weight: bold;
            margin-right: 10px;
        }

        .email-content strong {
            color: #2d3748;
        }

        /* Info box for details */
        .info-box {
            background: linear-gradient(135deg, #e6f7fa 0%, #f0f9ff 100%);
            border-left: 4px solid #00B4D8;
            border-radius: 8px;
            padding: 20px 24px;
            margin: 24px 0;
        }

        .info-box-title {
            color: #0077B6;
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 12px 0;
        }

        .info-item {
            display: block;
            color: #4a5568;
            font-size: 14px;
            padding: 6px 0;
            border-bottom: 1px solid rgba(0, 119, 182, 0.1);
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .info-label {
            font-weight: 600;
            color: #2d3748;
        }

        /* CTA Button */
        .cta-container {
            text-align: center;
            margin: 32px 0;
        }

        .cta-button {
            display: inline-block;
            background: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
            color: #ffffff !important;
            text-decoration: none;
            padding: 14px 32px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            box-shadow: 0 4px 14px rgba(0, 119, 182, 0.3);
            transition: all 0.3s ease;
        }

        .cta-button:hover {
            box-shadow: 0 6px 20px rgba(0, 119, 182, 0.4);
        }

        /* Section headers */
        .section-header {
            color: #0077B6;
            font-size: 18px;
            font-weight: 600;
            margin: 28px 0 16px 0;
            padding-bottom: 8px;
            border-bottom: 2px solid #e6f7fa;
        }

        /* Attachments section */
        .attachments-section {
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px solid #e2e8f0;
        }

        .attachments-title {
            color: #4a5568;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .attachment-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .attachment-list li {
            margin-bottom: 8px;
        }

        .attachment-link {
            display: inline-flex;
            align-items: center;
            color: #0077B6;
            text-decoration: none;
            font-size: 14px;
            padding: 8px 16px;
            background-color: #f0f9ff;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .attachment-link:hover {
            background-color: #e6f7fa;
            color: #023E8A;
        }

        .attachment-icon {
            margin-right: 8px;
        }

        /* Footer */
        .email-footer {
            background: linear-gradient(135deg, #e2e8f0 0%, #dfe6ed 100%);
            padding: 30px 40px;
            text-align: center;
            border-top: 1px solid #cbd5e0;
        }

        .footer-logo {
            max-width: 120px;
            height: auto;
            margin-bottom: 16px;
            opacity: 0.8;
        }

        .footer-text {
            color: #718096;
            font-size: 13px;
            margin: 0 0 8px 0;
        }

        .footer-contact {
            color: #0077B6;
            font-size: 13px;
            text-decoration: none;
        }

        .footer-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, #cbd5e0, transparent);
            margin: 20px 0;
        }

        .footer-timestamp {
            color: #a0aec0;
            font-size: 11px;
            margin: 0;
        }

        .footer-copyright {
            color: #a0aec0;
            font-size: 11px;
            margin: 8px 0 0 0;
        }

        /* Responsive */
        @media only screen and (max-width: 600px) {
            .email-wrapper {
                padding: 20px 10px;
            }
            .email-header {
                padding: 24px 20px;
            }
            .email-body {
                padding: 24px 20px;
            }
            .email-footer {
                padding: 24px 20px;
            }
            .email-title {
                font-size: 20px;
            }
            .logo {
                max-width: 140px;
            }
        }
    </style>
</head>
<body>
    <div class="email-wrapper">
        <div class="email-container">
            <!-- Header -->
            <div class="email-header">
                <div class="logo-container">
                    {% if logo_url %}
                    <img src="{{ logo_url }}" alt="AutoBridge Systems" class="logo">
                    {% else %}
                    <!-- AutoBridge Systems Text Logo -->
                    <div style="font-size: 28px; font-weight: 700; color: #ffffff; letter-spacing: 1px;">
                        <span style="color: #90E0EF;">Auto</span><span style="color: #ffffff;">Bridge</span>
                    </div>
                    <div style="font-size: 12px; color: #CAF0F8; letter-spacing: 2px; margin-top: 4px;">SYSTEMS</div>
                    {% endif %}
                </div>
                <h1 class="email-title">{{ title }}</h1>
            </div>

            <!-- Body -->
            <div class="email-body">
                <div class="email-content">{{ content|safe }}</div>

                {% if attachments %}
                <div class="attachments-section">
                    <p class="attachments-title">Attachments</p>
                    <ul class="attachment-list">
                        {% for attachment in attachments %}
                        <li>
                            <a href="{{ attachment.url }}" class="attachment-link">
                                <span class="attachment-icon">&#128206;</span>
                                {{ attachment.file_name }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </div>

            <!-- Footer -->
            <div class="email-footer">
                {% if logo_url %}
                <img src="{{ logo_url }}" alt="AutoBridge Systems" class="footer-logo">
                {% else %}
                <div style="font-size: 18px; font-weight: 600; color: #0077B6; margin-bottom: 12px;">
                    <span style="color: #00B4D8;">Auto</span><span style="color: #0077B6;">Bridge</span>
                </div>
                {% endif %}
                <p class="footer-text">{{ footer|default('AutoBridge Systems - Streamlining Government Services') }}</p>
                <div class="footer-divider"></div>
                <p class="footer-timestamp">Sent on: {{ timestamp }}</p>
                <p class="footer-copyright">© {{ timestamp[:4] if timestamp else '2024' }} AutoBridge Systems. All rights reserved.</p>
            </div>
        </div>
    </div>
</body>
</html>
