@php($data = $notification->data)
<li>
    <a href="{{ route('user.show', $data['username']) }}"
        @click.prevent="isOpen = false"
        wire:click.prevent="markAsReadFollower('{{ $notification->id }}')"
        class="flex px-3 py-3 transition duration-150 ease-in hover:bg-slate-100 dark:hover:bg-slate-700 sm:px-10 md:px-5">
        <img src="{{ $data['user_avatar'] }}" alt="avatar"
            class="h-10 w-10 rounded-xl" />
        {{-- <div class="flex grow flex-col">
            <div class="font-semibold">{{ $data['name'] ? $data['name'] : $data['username'] }} <span
                    class="mr-1 font-medium">{{ __('started following your blog') }}</span></div>
            <div class="text-xs text-gray-400">
                {{ $notification->created_at->toFormattedDateString() }}
            </div>
        </div> --}}
        <div class="ml-4 grow">
            <div class="flex items-center justify-between">
                <div class="font-semibold">{{ $data['name'] ? $data['name'] : $data['username'] }}</div>
                <div class="text-xs text-gray-400">
                    {{ $notification->created_at->diffForHumans() }}
                </div>
            </div>
            <div class="line-clamp-6 text-sm font-semibold">
                {{ __('started following your blog') }}
            </div>
        </div>
    </a>
</li>