@using AliasVault.Client.Main.Pages.Emails.Models

<li class="@($"hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out cursor-pointer {(IsSelected ? "bg-primary-50 dark:bg-primary-900/30 border-l-4 border-primary-500" : "")}")">
    <div @onclick="@(() => OnEmailClick.InvokeAsync(Email.Id))" class="p-4 flex justify-start items-start">
        <div class="mr-4 flex-shrink-0">
            <SenderInitials SenderName="@Email.FromName" SenderEmail="@Email.FromEmail" />
        </div>
        <div class="flex-grow min-w-0">
            <div class="flex items-start justify-between">
                <div class="flex-grow min-w-0 mr-2">
                    <!-- From Name (top, prominent) -->
                    <div class="text-gray-800 dark:text-gray-200 font-medium truncate mb-1 flex items-center">
                        @Email.FromName
                        @if (Email.HasAttachments)
                        {
                            <svg class="attachment-indicator w-3 h-3 ml-1 text-gray-500 dark:text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
                            </svg>
                        }
                    </div>
                    <!-- Subject (smaller, below from) -->
                    <div class="text-sm text-gray-600 dark:text-gray-300 truncate mb-1">
                        @Email.Subject
                    </div>
                    <!-- Message Preview (single line, overflow hidden) -->
                    <div class="text-xs text-gray-500 dark:text-gray-400 truncate">
                        @Email.MessagePreview
                    </div>
                </div>
                <!-- Date (compact format) -->
                <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
                    @Email.Date.ToString("dd-MM")
                </div>
            </div>
        </div>
    </div>
</li>

@code {
    /// <summary>
    /// The email model.
    /// </summary>
    [Parameter]
    public required MailListViewModel Email { get; set; }

    /// <summary>
    /// OnClick handler for email.
    /// </summary>
    [Parameter]
    public EventCallback<int> OnEmailClick { get; set; }


    /// <summary>
    /// Whether this email is currently selected.
    /// </summary>
    [Parameter]
    public bool IsSelected { get; set; }
}