@if($messageId)
    <livewire:frontend.components.message :message="$message" />
@else
    <div class="inbox-list cursor-pointer" wire:click="setMessageId({{ $message['id'] }})" data-message-id="{{ $message['id'] }}">
        <div class="block rounded-lg bg-white shadow-md dark:bg-zinc-700 text-left">
            <div class="flex items-center px-4 py-4 sm:px-6">
                <div class="flex flex-1 items-center min-w-0">
                    <div class="flex-shrink-0">
                        <span class="relative inline-block">
                            <img src="{{ asset('images/user.webp') }}" class="size-12" alt="inbox-logo" />
                            <span class="shadow-solid absolute bottom-0 right-0 block w-3 h-3  dark:text-gray-500 text-white bg-amber-300 dark:bg-amber-400 rounded-full"></span>
                        </span>
                    </div>
                    <div class="flex-1 px-4 min-w-0 md:grid md:gap-4 md:grid-cols-2">
                        <div>
                            <div class="dark:text-accent text-accent-content text-sm font-medium leading-5 truncate">
                                {{ $message['sender_name'] }}
                            </div>
                            <div class="flex items-center mt-2 dark:text-gray-400 text-gray-500 text-sm leading-5">
                                <svg fill="currentColor" viewBox="0 0 20 20"
                                     class="flex-shrink-0 mr-1.5 w-5 h-5 text-gray-400">
                                    <path fill-rule="evenodd"
                                          d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884zM18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
                                          clip-rule="evenodd"></path>
                                </svg>
                                <span class="truncate">{{ $message['sender_email'] }}</span></div>
                        </div>
                        <div class="hidden md:block">
                            <div>
                                <div class="dark:text-gray-300 text-gray-900 text-sm leading-5 truncate">
                                    {{ $message['subject'] }}
                                </div>
                                <div
                                    class="flex items-center mt-2 text-gray-400 dark:text-gray-400 text-sm leading-5 truncate">
                                    {{ Str::limit($message['contentText'], 100) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5 text-gray-400">
                        <path fill-rule="evenodd"
                              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                              clip-rule="evenodd"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
@endif