@component('emails.layouts.html', ['subject' => __('Your call has expired')])

{{-- Warning Banner --}}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 20px 0; border-collapse: collapse; background-color: #F9FAFB; border-left: 4px solid {{ theme_color('text.primary') }};">
    <tr>
        <td style="padding: 20px; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif;">
            <h1 style="color: {{ theme_color('text.primary') }}; margin: 0 0 10px 0; font-size: 24px; font-weight: bold;">{{ __('Your call has expired') }}</h1>
            <p style="font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 0;">
                {{ $callTitle }}
            </p>
        </td>
    </tr>
</table>

{{-- Greeting --}}
<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 0 0 15px 0; padding: 0; line-height: 1.5;">
    {{ __('Dear') }} {{ $callable->name }},
</p>

{{-- Main message --}}
<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 0 0 15px 0; padding: 0; line-height: 1.5;">
    {{ __('Your call ":title" has expired and is no longer visible on the platform.', ['title' => $callTitle]) }}
</p>

<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 0 0 30px 0; padding: 0; line-height: 1.5;">
    {{ __('You can create a new call or extend the expiry date on your calls page.') }}
</p>

{{-- CTA button --}}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 30px 0; border-collapse: collapse;">
    <tr>
        <td align="center" style="padding: 0;">
            <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
                <tr>
                    <td align="center" style="border-radius: 8px; background-color: #111827;">
                        <a href="{{ $loginUrl }}" style="display: inline-block; padding: 16px 40px; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #ffffff; text-decoration: none; border-radius: 8px; mso-padding-alt: 0;">
                            {{ __('Manage your calls') }}
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 14px; color: #6B7280; margin: 15px 0 30px 0; padding: 0; line-height: 1.5; text-align: center;">
    {{ __('Click the button above to log in and manage your calls.') }}
</p>

@endcomponent