<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{ $locale ?? config('app.locale') }}" lang="{{ $locale ?? config('app.locale') }}">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="x-apple-disable-message-reformatting" />
    <title>{{ $subject }}</title>
    <!--[if mso]>
    <style type="text/css">
        body, table, td, p, a, li {
            font-family: Arial, sans-serif !important;
        }
    </style>
    <![endif]-->
    <style type="text/css">
        /* Client-specific Styles */
        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;
        }

        /* Reset styles */
        body {
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table {
            border-collapse: collapse !important;
        }

        /* What it does: Fixes webkit padding issue. */
        table.email-container {
            border-spacing: 0 !important;
        }

        /* Progressive Enhancement for Mobile */
        @media only screen and (max-width: 600px) {
            .email-container {
                width: 100% !important;
            }
        }
    </style>
</head>
<body style="margin: 0; padding: 0; width: 100%; background-color: #f4f4f4; font-family: Arial, Helvetica, sans-serif;">
    <table role="presentation" class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center">
                <table role="presentation" class="email-container" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; background-color: #ffffff;">

                    <!-- Header -->
                    <tr>
                        <td style="background-color: {{ theme_color('brand') }}; padding: 20px; text-align: center;">
                            <img src="{{ asset('storage/app-images/app_mail_logo_inverted.png') }}" alt="{{ config('app.name') }}" width="90" height="auto" style="width: 90px; max-width: 90px; height: auto; display: block; margin: 0 auto; border: 0; outline: none;" />
                            @if(isset($mailingTitle))
                                <p style="color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 600; margin: 0; padding: 0; mso-line-height-rule: exactly; line-height: 1.5;">
                                    {{ $mailingTitle }}
                                </p>
                            @endif
                        </td>
                    </tr>

                    <!-- Content -->
                    <tr>
                        <td class="email-content" style="padding: 30px 20px 0px 20px;">
                            @if(isset($contentBlocks) && count($contentBlocks) > 0)
                                @foreach($contentBlocks as $block)
                                    @include($block['template'], ['post' => $block['data']])
                                @endforeach
                            @else
                                {{ $slot ?? '' }}
                            @endif
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td style="background-color: #f9fafb; padding: 20px; text-align: center; border-top: 1px solid #e5e7eb;">
                            <p style="margin: 5px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; line-height: 1.5;">
                                {{ __('You received this newsletter because you subscribed to our updates.') }}
                            </p>
                            <p style="margin: 5px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; line-height: 1.5;">
                                <a href="{{ $unsubscribeUrl ?? '#' }}" style="color: #6b7280; text-decoration: underline;">
                                    {{ __('Unsubscribe') }}
                                </a> |
                                <a href="{{ config('app.url') }}" style="color: #6b7280; text-decoration: underline;">
                                    {{ __('Visit our website') }}
                                </a>
                            </p>
                            <p style="margin: 15px 0 5px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; line-height: 1.5;">
                                © {{ date('Y') }} {{ config('app.name') }}. {{ __('All rights reserved.') }}
                            </p>
                        </td>
                    </tr>

                </table>
            </td>
        </tr>
    </table>
</body>
</html>