<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
</head>
<body>
    <div id="wrapper" dir="ltr" style="background-color: #f5f5f5; font-family: Arial, sans-serif; text-align: left; width: 100%;">
        <div id="template_container" style="max-width: 600px; margin: 0 auto;">
            <!-- Header -->
            <div id="header" style="background-color: #0073e6; color: #ffffff; text-align: center; padding: 20px;">
                <h1>{{title}}</h1>
            </div>
            <!-- Email Content -->
            <div id="content" style="background-color: #ffffff; padding: 20px;">
                <h2>{{subject}}</h2>
                <p>Dark Mode User: {{dark_mode_users}}</p>
                <!-- Custom Variables -->
                <p>Light Mode User: {{light_mode_users}}</p>
                <p>Total User: {{total_mode_users}}</p>
            </div>
            <!-- Footer -->
            <div id="footer" style="background-color: #f5f5f5; padding: 10px; text-align: center;">
                <p>&copy; {{copyright_text}}</p>
            </div>
        </div>
    </div>
</body>
</html>
