<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Space Delete Request</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .social-icons {
            margin-block: 10px;
        }
        .social-icons img {
            width: 20px;
            margin: 0 5px;
        }
        .container {
            background-color: #ffffff;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            border-radius: 8px;
        }
        .logo {
            margin-bottom: 20px;
        }
        .logo img {
            max-width: 150px;
        }
        .email-header {
            font-size: 24px;
            font-weight: bold;
            color: #333333;
        }
        .email-body {
            margin: 20px 0;
            font-size: 16px;
            color: #555555;
        }
        .footer {
            margin-top: 30px;
            font-size: 14px;
            color: #888888;
        }
        .social-icons {
            margin-block: 10px;
        }
        .social-icons i {
           font-size: 20px;
            margin: 0 5px;
        }
        .cta-button {
            display: inline-block;
            background-color: #FF7300;
            color: #ffffff;
            text-decoration: none;
            padding: 4px 20px;
            border-radius: 30px;
            font-size: 16px;
            margin-top: 20px;
            transition: background-color 0.3s ease;
        }

    </style>
</head>
<body>
    <div class="container" style=" padding: 15px; margin: 0 auto; background-color: #fff;">
        <div class="" style="background-color: #ffefe3; padding: 15px; border-radius: 10px;">
            <div style="background-color: #fff;  padding: 10px; border-radius: 10px;">
                <div class="logo" style="text-align: center;">
                    <img src="https://worker-app.s3.amazonaws.com/images/1705985271602_Flexologo.png" alt="Flexo Logo">
                </div>
                <div class="email-header " style="text-align: center;">Your Request To Deactivate Your Listing is Under Review</div>
                <div class="email-body">
                    <p class="text-start">Hi <%= data.hostName %>,</p>
                    <p class="text-start">Your request to deactivate your listing for <%= data.spaceName %>, <%= data.spaceCity %> is under review. </p>    
                    <p>Our listing team may reach out to you for verification or if there
                        are any questions or clarifications needed. </p>
                    <p>If this was an error, please contact us at support@flexospaces.com. </p>
                    <div  style="margin-top: 25px;">
                        <p  style="margin-bottom: 5px;">Best regards,</p>
                        <p>Team Flexo</p>
                    </div>  
                </div>
            </div>
            <div class="footer  mt-3" style="width:100%;display: flex; align-items: center; justify-content: space-between;flex-wrap: wrap;">
                <div style="width: 50%;">
                    <p style="text-align: start;color: black; ">Stay connected with us:</p>
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left">
                        <tr>
                            <td align="left" style="padding-right:10px">
                            <a href="https://www.instagram.com/flexospaces/" target="_blank">
                                <img src="<%= data.flexoUrl + '/assets/instagram.png' %>" alt="Instagram" width="20" style="display:block; margin:0 5px;">
                            </a>
                        </td>
                        <td align="left"  style="padding-right:10px">
                            <a href="https://www.youtube.com/@flexospaces" target="_blank">
                                <img src="<%= data.flexoUrl + '/assets/youtube.png' %>" alt="YouTube" width="20" style="display:block; margin:0 5px;">
                            </a>
                        </td>
                        <td align="left">
                            <a href="https://www.linkedin.com/company/flexospaces/" target="_blank">
                                <img src="<%= data.flexoUrl + '/assets/linkedin.png' %>" alt="LinkedIn" width="20" style="display:block; margin:0 5px;">
                            </a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="width: 50%;">
                    <p class="mb-2" style="color: black;">&copy; 2024 Flexo,
                        all rights reserved.</p>
                    <p>
                        <a href="<%= data.webUrl + '/privacy-policy' %>"
                            style="text-decoration: none; color: black;">Privacy
                            Policy
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
