<!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <style>
                        body.email-template { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 10px; }
                        .container { max-width: 600px; margin: 0 auto; background-color: #ffffff; border: 1px solid #eaeaea; border-radius: 8px; overflow: hidden; }
                        .header { background-color: #f1f1f1; text-align: center; padding: 20px; }
                        .content { padding: 30px 20px; text-align: left; color: #333333; font-size: 14px; }
                        .credentials { background-color: #f8f8f8; padding: 15px; border-radius: 5px; margin: 15px 0; }
                        .button { background-color: #1E3A8A; color: #ffffff !important; padding: 12px 24px; text-decoration: none; font-weight: bold; border-radius: 6px; display: inline-block; margin: 20px 0; }
                        .footer { background-color: #22242A; padding: 20px; text-align: center; font-size: 12px; color: #FFFFFF; }
                    </style>
                </head>
                <body class="email-template">
                    <div class="container">
                        <div class="header">
                            <img src="{{EMAIL_LOGO}}" alt="{{IMAGE_ALT}}" style="width: 200px; max-width: 600px; height: auto; border-radius: 8px 8px 0 0;">
                        </div>
                        <div class="content">
                            <h2>Welcome to Eventably!</h2>
                            <p>
                                Your account has been created with the following
                                credentials:
                            </p>
                            <div class="credentials">
                                <p><strong>Email:</strong> {{EMAIL}}</p>
                                <p><strong>Temporary Password:</strong>{{PASSWORD}}</p>
                            </div>
                            <p>
                                To activate your account, you must confirm your email
                                address by clicking the button below:
                            </p>
                            <a
                                href="{{BASE_URL}}/{{CHECK_ROLES}}/{{LAST12DIGITS}}"
                                class="button"
                                target="_blank"
                                >Confirm Account</a
                            >
                            <p>
                                If the button above doesn't work, copy and paste the
                                following link into your browser:
                            </p>
                            <p>
                                <a
                                    href="{{BASE_URL}}/{{CHECK_ROLES}}/{{LAST12DIGITS}}"
                                    target="_blank"
                                    >{{BASE_URL}}/{{CHECK_ROLES}}/{{LAST12DIGITS}}</a
                                >
                            </p>
                            <p style="color: #555555; font-size: 15px; margin-top: 20px;">Best regards,<br />{{SIGNATURE}}</p>
                        </div>

                        <div class="footer">{{FOOTER}}</div>
                    </div>
                </body>
                </html>
                