{{--
    Starter template — copy and customize for new transactional emails.

    Usage in a Notification:
        return (new MailMessage)
            ->subject('Your subject line')
            ->view('emails.your-template', [
                'appName' => config('app.name'),
                // ...
            ]);
--}}
@extends('emails.layouts.app', [
    'emailTitle' => $subject ?? config('app.name'),
    'preheader'  => $preheader ?? '',
    'heading'    => $heading ?? 'Email subject line',
    'subheading' => $subheading ?? null,
    'footerEmail' => $recipientEmail ?? null,
])

@section('content')
    <p style="margin: 0 0 16px; font-size: 18px; font-weight: 600; line-height: 28px; color: #0f172a;">
        {{ __('emails.starter.hello') }}{{ isset($name) ? ", {$name}" : '' }}!
    </p>

    <p style="margin: 0 0 16px; font-size: 15px; line-height: 24px; color: #475569;">
        {{ __('emails.starter.main_message') }}
    </p>

    {{-- Unordered list example --}}
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin: 0 0 16px;">
        <tr>
            <td style="font-size: 15px; line-height: 26px; color: #475569; padding-left: 4px;">
                &bull; First item<br />
                &bull; Second item<br />
                &bull; Third item
            </td>
        </tr>
    </table>

    @isset($actionUrl)
        <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin: 32px 0;">
            <tr>
                <td align="center">
                    @include('emails.components.button', [
                        'url' => $actionUrl,
                        'label' => $actionLabel ?? 'Get Started',
                    ])
                </td>
            </tr>
        </table>
    @endisset

    @component('emails.components.info-box')
        @slot('title')
            Helpful information
        @endslot
        Optional informational block for account details, order summaries, etc.
    @endcomponent

    <p style="margin: 0; font-size: 15px; line-height: 24px; color: #475569;">
        {{ __('emails.starter.ignore_notice') }}
    </p>
@endsection