<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <title>2FA Email</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,600" rel="stylesheet" type="text/css">
    <style>
        /* Global Styles */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            color: #8094ae;
            font-weight: 400;
            line-height: 24px;
            background-color: #f5f6fa;
        }
        
        /* Reset and Table Styles */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            margin: 0;
            padding: 0;
        }
        
        table, td {
            mso-table-lspace: 0 !important;
            mso-table-rspace: 0 !important;
        }
        
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        
        table table table {
            table-layout: auto;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            -ms-interpolation-mode: bicubic;
        }

        /* Header Styles */
        .header {
            text-align: center;
            padding-bottom: 25px;
        }

        /* Main Content Styles */
        .main-content {
            background-color: #222222;
            padding: 30px;
            color: #dae2f1;
        }

        .main-content h2 {
            font-size: 22px;
            color: #ffc952;
            font-weight: 600;
            text-align: center;
            margin: 0;
        }

        .main-content p {
            margin-bottom: 10px;
            font-size: 22px;
            font-weight: bold;
            text-transform: capitalize;
        }

        /* Footer Styles */
        .footer {
            text-align: center;
            padding: 25px 20px 0;
            font-size: 13px;
        }

        .footer ul {
            margin: 10px -4px 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <center style="width: 100%;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td style="padding: 40px 0;">
                    <table style="width:100%;max-width:620px;margin:0 auto;">
                        <tr>
                            <td class="header">
                                <!-- <a href="#"> -->
                                <!-- <img style="height: 60px" src="{{ url('/assets/images/logo.png') }}" alt="logo"> -->
                                <!-- </a> -->
                            </td>
                        </tr>
                    </table>
                    <table class="main-content" width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <h2>2FA Code</h2>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>This is your 2FA code: {{ $data['token'] }}. Note that this code expires in 30 minutes.</p>
                            </td>
                        </tr>
                    </table>
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="footer">
                                <p>Copyright © {{ date('Y') }} G.E.A.S</p>
                                <ul>
                                    <!-- Optional Footer Links -->
                                </ul>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </center>
</body>
</html>
