<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Contact Details</title>
</head>
<body bgcolor="#f3f4f6" style="font-family: Arial, Helvetica, sans-serif;">
    <table cellpadding="20" cellspacing="0" border="0" width="100%">
        <tr>
            <td align="center">
                <table cellpadding="30" cellspacing="0" border="1" width="600" bgcolor="#ffffff" bordercolor="#e5e7eb" style="border-collapse: collapse;">
                    <tr>
                        <td>
                            <font color="#1f2937" size="5" face="Arial, Helvetica, sans-serif">Contact Details</font>
                            {% if data.phone %}
                            <table cellpadding="15" cellspacing="0" border="1" width="100%" bgcolor="#f9fafb" bordercolor="#e5e7eb" style="border-collapse: collapse; margin-top: 20px;">
                                <tr>
                                    <td>
                                        <font color="#6b7280" size="2" face="Arial, Helvetica, sans-serif">Phone</font><br>
                                        <font color="#1f2937" size="3" face="Arial, Helvetica, sans-serif">{{ data.phone }}</font>
                                    </td>
                                </tr>
                            </table>
                            {% endif %}
                            <table cellpadding="15" cellspacing="0" border="1" width="100%" bgcolor="#f9fafb" bordercolor="#e5e7eb" style="border-collapse: collapse; margin-top: 20px;">
                                <tr>
                                    <td>
                                        <font color="#6b7280" size="2" face="Arial, Helvetica, sans-serif">Message</font><br>
                                        <font color="#1f2937" size="3" face="Arial, Helvetica, sans-serif">{{ data.message }}</font>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>