<x-emails.layout subject="{{ $commenter->name }} commented on your video">

    <div style="width:64px;height:64px;border-radius:50%;background:rgba(230,30,30,.12);border:1px solid rgba(230,30,30,.25);margin:0 auto 24px;text-align:center;line-height:64px;font-size:28px;">&#x1F4AC;</div>

    <h1 class="email-title">New comment on your video</h1>
    <p class="email-subtitle">Someone left a comment on <strong style="color:#f1f1f1;">{{ $video->title }}</strong>.</p>

    <p class="email-text">Hi <strong style="color:#f1f1f1;">{{ $recipient->name }}</strong>,</p>
    <p class="email-text">
        <strong style="color:#f1f1f1;">{{ $commenter->name }}</strong> commented on your video:
    </p>

    <div class="email-infobox">
        <div class="email-infobox-label">Comment</div>
        <div style="color:#e0e0e0;font-size:14px;line-height:1.6;padding:4px 0;">
            "{{ \Illuminate\Support\Str::limit(strip_tags($comment->body), 200) }}"
        </div>
    </div>

    <div class="email-btn-wrap">
        <a href="{{ route('videos.show', $video) }}" class="email-btn">&#x1F4AC;&nbsp; View Comment</a>
    </div>

    <hr class="email-divider">
    <p class="email-note">You can manage your notification preferences in your <a href="{{ route('settings') }}">account settings</a>.</p>

</x-emails.layout>
