<!DOCTYPE html>
<html lang="{{ $locale }}" 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, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="x-apple-disable-message-reformatting">
    <title>{{ __('activation.email_subject', [], $locale) }}</title>
    <!--[if mso]>
    <noscript>
        <xml>
            <o:OfficeDocumentSettings>
                <o:AllowPNG/>
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    </noscript>
    <style>
        table { border-collapse: collapse; }
        .button-td, .button-a { transition: none !important; }
    </style>
    <![endif]-->
    <style>
        * { box-sizing: border-box; }
        body, table, td, p, a, li, blockquote {
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }
        table, td {
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }
        img {
            -ms-interpolation-mode: bicubic;
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
        }
        body {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            background-color: #f4f4f4;
        }
        a { text-decoration: none; }
        @media screen and (max-width: 600px) {
            .email-container { width: 100% !important; }
            .mobile-padding { padding: 20px 25px !important; }
            .header-title { font-size: 22px !important; }
        }
    </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4; font-family: Arial, Helvetica, sans-serif; mso-line-height-rule: exactly;">
    <!-- Wrapper table -->
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f4f4f4;">
        <tr>
            <td align="center" style="padding: 30px 15px;">
                
                <!-- Email container -->
                <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" class="email-container" style="background-color: #ffffff; max-width: 600px;">
                    
                    <!-- HEADER -->
                    <tr>
                        <td bgcolor="#0B3C61" style="background-color: #0B3C61; padding: 35px 30px; text-align: center;">
                            <!--[if mso]>
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                            <td align="center" style="padding-bottom: 20px;">
                            <![endif]-->
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td align="center" style="padding-bottom: 20px;">
                                        <img src="{{ config('app.url') }}/images/logo-esi-peppol-light.png" alt="ESI PEPPOL" width="130" style="display: block; max-width: 130px; height: auto; border: 0;">
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <p style="color: #a8c5db; font-size: 13px; margin: 0 0 8px 0; letter-spacing: 1px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif;">
                                            {{ __('activation.email_header_subtitle', [], $locale) }}
                                        </p>
                                        <h1 class="header-title" style="color: #ffffff; font-size: 26px; font-weight: bold; margin: 0; font-family: Arial, Helvetica, sans-serif;">
                                            ESI PEPPOL
                                        </h1>
                                    </td>
                                </tr>
                            </table>
                            <!--[if mso]>
                            </td>
                            </tr>
                            </table>
                            <![endif]-->
                        </td>
                    </tr>

                    <!-- CONTENT -->
                    <tr>
                        <td class="mobile-padding" style="padding: 40px 45px; background-color: #ffffff;">
                            
                            <!-- Greeting -->
                            <p style="color: #1a1a1a; font-size: 17px; font-weight: bold; margin: 0 0 25px 0; font-family: Arial, Helvetica, sans-serif;">
                                {{ __('activation.email_greeting', [], $locale) }}
                            </p>

                            <!-- Main text -->
                            <p style="color: #333333; font-size: 15px; line-height: 24px; margin: 0 0 18px 0; font-family: Arial, Helvetica, sans-serif;">
                                <strong>{{ __('activation.email_line_1', [], $locale) }}</strong>
                            </p>

                            <p style="color: #333333; font-size: 15px; line-height: 24px; margin: 0 0 18px 0; font-family: Arial, Helvetica, sans-serif;">
                                {{ __('activation.email_line_2', [], $locale) }}
                            </p>

                            <p style="color: #333333; font-size: 15px; line-height: 24px; margin: 0 0 28px 0; font-family: Arial, Helvetica, sans-serif;">
                                {{ __('activation.email_line_3', [], $locale) }}
                            </p>

                            <!-- BUTTON - Compatible Outlook -->
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td align="center" style="padding: 8px 0 28px 0;">
                                        <!--[if mso]>
                                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $url }}" style="height:48px;v-text-anchor:middle;width:220px;" arcsize="10%" strokecolor="#0B3C61" fillcolor="#0B3C61">
                                        <w:anchorlock/>
                                        <center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;">{{ __('activation.email_action', [], $locale) }} &rarr;</center>
                                        </v:roundrect>
                                        <![endif]-->
                                        <!--[if !mso]><!-->
                                        <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                                            <tr>
                                                <td style="border-radius: 5px; background-color: #0B3C61;">
                                                    <a href="{{ $url }}" target="_blank" style="display: inline-block; background-color: #0B3C61; color: #ffffff; font-size: 15px; font-weight: bold; text-decoration: none; padding: 14px 35px; border-radius: 5px; font-family: Arial, Helvetica, sans-serif; border: none;">
                                                        {{ __('activation.email_action', [], $locale) }} &rarr;
                                                    </a>
                                                </td>
                                            </tr>
                                        </table>
                                        <!--<![endif]-->
                                    </td>
                                </tr>
                            </table>

                            <!-- Info notice -->
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td style="padding: 15px 18px; background-color: #f8f9fa; border-left: 4px solid #0B3C61;">
                                        <p style="color: #666666; font-size: 13px; line-height: 20px; margin: 0; font-family: Arial, Helvetica, sans-serif;">
                                            {{ __('activation.email_line_4', [], $locale) }}
                                        </p>
                                    </td>
                                </tr>
                            </table>

                            <!-- Closing text -->
                            <p style="color: #333333; font-size: 15px; line-height: 24px; margin: 22px 0 22px 0; font-family: Arial, Helvetica, sans-serif;">
                                {{ __('activation.email_line_5', [], $locale) }}
                            </p>

                            <!-- Signature -->
                            <p style="color: #333333; font-size: 15px; margin: 0 0 5px 0; font-family: Arial, Helvetica, sans-serif;">
                                {{ __('activation.email_closing', [], $locale) }}
                            </p>
                            <p style="color: #0B3C61; font-size: 15px; font-weight: bold; margin: 0; font-family: Arial, Helvetica, sans-serif;">
                                {{ __('activation.email_team', [], $locale) }}
                            </p>
                        </td>
                    </tr>

                    <!-- FOOTER -->
                    <tr>
                        <td bgcolor="#0B3C61" style="background-color: #0B3C61; padding: 28px 45px; text-align: center;">
                            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                                <tr>
                                    <td align="center" style="padding-bottom: 15px;">
                                        <img src="{{ config('app.url') }}/images/logo-esi-peppol-light.png" alt="ESI PEPPOL" width="100" style="display: block; max-width: 100px; height: auto; border: 0;">
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <p style="color: #a8c5db; font-size: 12px; margin: 0 0 5px 0; font-family: Arial, Helvetica, sans-serif;">
                                            {{ __('activation.email_footer_contact', [], $locale) }}
                                        </p>
                                        <p style="color: #ffffff; font-size: 13px; margin: 0; font-family: Arial, Helvetica, sans-serif;">
                                            087 27 92 14 &nbsp;-&nbsp; web@esi-informatique.com
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                </table>
                <!-- End email container -->

            </td>
        </tr>
    </table>
    <!-- End wrapper table -->
</body>
</html>
