@extends('emails.layouts.default-mail')

@section('content')

<table width="100%">
    <tr>
        <td class="email-px email-title-box" style="padding: 0 40px; background-color: rgba(255, 255, 255, 1)">
            @include('emails.components.subject-box', [
                'title' => 'Your verification code',
                'description' => 'Use this code to verify your identity and continue.',
            ])
        </td>
    </tr>

    <tr>
        <td
            class="email-px email-text"
            align="left"
            style="padding: 28px 40px 32px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; color: #64748b;"
        >
            <p style="margin: 0 0 16px; font-size: 18px; font-weight: 600; line-height: 28px; color: #0f172a;">
                Hello [full-name]!
            </p>

            <p style="margin: 0 0 16px; font-size: 15px; line-height: 24px; color: #475569;">
                You requested a verification code for your <strong style="color: #0f172a;">{{ config('app.name') }}</strong> account
                associated with <strong style="color: #0f172a;">[email]</strong>.
                Enter the code below to continue.
            </p>

            @include('emails.components.password-box', [
                'label' => 'Verification code',
                'value' => '[otp]',
            ])

            @component('emails.components.info-box')
                @slot('title')
                    Code details
                @endslot
                <strong style="color: #0f172a;">Account:</strong> [email]<br />
                <strong style="color: #0f172a;">Expires in:</strong> [expiry]<br />
                <strong style="color: #0f172a;">Sent at:</strong> [current-date-time]
            @endcomponent

            @component('emails.components.notice-box')
                <strong style="color: #78350f;">Didn't request this?</strong><br />
                You can safely ignore this email. If you're concerned about your account security, contact our support team.
            @endcomponent
        </td>
    </tr>
</table>
@endsection