@extends('emails.layout')

@section('content')
    <div class="title">New login detected</div>

    <div class="text">
        Hello{{ isset($user) && !empty($user->name) ? ' ' . (is_string($user->name) ? $user->name : '') : '' }},<br><br>
        We noticed a new sign-in to your account. If this was you, no action is needed.
    </div>

    <div style="background:#0d0d0d;border:1px solid #151515;border-radius:12px;padding:16px;margin:16px 0;">
        <div style="display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed #222;">
            <div style="color:#9aa0a6;font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.6px;">Date &amp; Time</div>
            <div style="color:#e8eaed;font-size:14px;font-weight:700;word-break:break-word;">{{ $loginAt ?? '' }}</div>
        </div>
        <div style="display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed #222;">
            <div style="color:#9aa0a6;font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.6px;">IP Address</div>
            <div style="color:#e8eaed;font-size:14px;font-weight:700;word-break:break-word;">{{ $ip ?? 'Unknown' }}</div>
        </div>
        <div style="display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed #222;">
            <div style="color:#9aa0a6;font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.6px;">Device / Browser</div>
            <div style="color:#e8eaed;font-size:14px;font-weight:700;word-break:break-word;">{{ $userAgent ?? 'Unknown' }}</div>
        </div>
        <div style="display:flex;justify-content:space-between;gap:10px;padding:6px 0;">
            <div style="color:#9aa0a6;font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.6px;">Location</div>
            <div style="color:#e8eaed;font-size:14px;font-weight:700;word-break:break-word;">Approximate based on IP</div>
        </div>
    </div>

    <div class="text">If this wasn't you, please secure your account immediately.</div>

    <div style="text-align:center; margin: 20px 0;">
        <a href="{{ $manageLink ?? url('/settings/security') }}" class="btn">Review security settings</a>
    </div>

    <div class="text" style="font-size: 12px; color: #999;">
        Tips to keep your account safe:
        <ul style="margin-top:8px; color:#888; padding-left:18px;">
            <li>Enable two-factor authentication (2FA).</li>
            <li>Use a strong, unique password and update it regularly.</li>
            <li>Never share your login codes or password.</li>
        </ul>
    </div>
@endsection