{% load i18n %}
{% load email_tags %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<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">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="format-detection" content="telephone=no, address=no, email=no, date=no, url=no">
    <title>{% block title %}Al Hammadi Hospital{% endblock %}</title>
    <style>
        html, body { margin: 0; padding: 0; width: 100% !important; height: 100% !important; }
        * { -ms-text-size-adjust: 100%; -webkit-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; }
        @media only screen and (max-width: 600px) {
            .email-container { width: 100% !important; }
        }
    </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">

    <div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
        {% block preheader %}Al Hammadi Hospital{% endblock %}
    </div>

    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f4f4f4;">
        <tr>
            <td align="center" style="padding: 20px 10px;">
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" class="email-container" style="width: 600px; max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden;">

                    <!-- Header: Logo + Hospital Name -->
                    <tr>
                        <td style="padding: 20px 30px; background-color: #ffffff;">
                            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="text-align: left; width: 90px; vertical-align: middle;">
                                        {% email_logo_url as default_logo_url %}
                                        <img src="{{ logo_url|default:default_logo_url }}"
                                             alt="Al Hammadi Hospital"
                                             width="75"
                                             style="display: block; max-width: 75px; height: auto;">
                                    </td>
                                    <td style="text-align: right; direction: rtl; font-size: 15px; color: #005696; font-weight: 700; vertical-align: middle; font-family: 'Segoe UI', Tahoma, 'Noto Kufi Arabic', sans-serif; padding-right: 5px;">
                                        مستشفى الحمادي
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- Blue separator line -->
                    <tr>
                        <td style="height: 2px; background-color: #005696; font-size: 1px; line-height: 1px;">&nbsp;</td>
                    </tr>

                    <!-- Content -->
                    <tr>
                        <td style="padding: 30px 40px; font-size: 16px; color: #333333; line-height: 1.7;">
                            {% block content %}{% endblock %}
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td style="padding: 20px 40px; border-top: 1px solid #eeeeee; text-align: center;">
                            <p style="margin: 0; font-size: 12px; color: #999999; line-height: 1.5;">
                                {% block footer %}
                                &copy; {% now "Y" %} {% trans "Al Hammadi Hospital. All rights reserved." %}
                                {% endblock %}
                            </p>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>

</body>
</html>
