<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Approval Notification</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
    }

    .container {
        max-width: 600px;
        margin: 20px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    h1, p {
        text-align: center;
    }

    .message {
        margin-bottom: 20px;
    }

    .button {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
        background-color: slateblue;
        color: white;
    }

    .Approved {
        background-color: #28a745;
        color: #fff;
    }

    .Denied {
        background-color: #dc3545;
        color: #fff;
    }
</style>
</head>
<body>
<div class="container">
    <h1 class="<%= status %>">Account <%= status %></h1>
    <div class="message">
        <p>Hello <%= name %>,</p>
        <p>Your account has been <strong><%= status %></strong></p>
        <p><strong>UserId:</strong><%= userId %></p>
    </div>
    <p>If you have any questions, feel free to contact us.</p>

    <% if (status=='Approved') { %>
            <a href="https://ju-community.vercel.app/">
                <button class="button" style="margin-left: 45%;">Visit JU Community</button>
            </a>
        
    <% } %>
</div>
</body>
</html>