@using Dpz.Core.EnumLibrary
@model IPagedList<Dpz.Core.Public.ViewModel.Response.MumbleResponse>
@inject MumbleViewHelper ViewHelper

@foreach (var item in Model)
{
    var (content, images) = await ViewHelper.SanitizeHtmlAndExtractImagesAsync(
        item.Markdown.MarkdownToHtml(false),
        item.Images
    );
    var galleryModel = new MumbleGalleryViewModel { Id = $"mumble-{item.Id}", Images = images };

    <article class="mumble-card" id="mumble-@item.Id">
        <div class="mumble-card__header">
            <img class="mumble-card__avatar" src="@item.Author.Avatar" alt="@item.Author.Name" loading="lazy">
            <div class="mumble-card__meta">
                <div class="mumble-card__author">
                    @item.Author.Name
                    <span class="mumble-card__role">@(item.Author.Permissions?.HasFlag(Permissions.System) == true ? "管理员" : "成员")</span>
                </div>
                <time class="mumble-card__time timeago" datetime="@item.CreateTime">@item.CreateTime</time>
            </div>
        </div>

        <div class="mumble-card__content markdown-body">
            @Html.Raw(content)
        </div>

        <partial name="_MumbleGalleryPartial" model="galleryModel" />

        <div class="mumble-card__footer">
            <a href="@Url.Action("Comment", "Mumble", new { id = item.Id })" class="mumble-action" title="详情" data-pjax>
                <i class="fa fa-info-circle"></i>
                <span>详情</span>
            </a>
            
            <button class="mumble-action" data-comment-toggle="@item.Id" title="评论">
                <i class="fa fa-commenting"></i>
                <span data-comment-count>@item.CommentCount</span>
            </button>
            
            <button class="mumble-action" data-like-id="@item.Id" title="点赞">
                <i class="fa fa-thumbs-up"></i>
                <span data-like-count>@item.Like</span>
            </button>
        </div>

        <!-- Comments Container -->
        <div class="mumble-comments is-hidden" 
             id="comments-@item.Id"
             data-load-url="@Url.Action("Index", "Comment", new { node = CommentNode.Mumble, relation = item.Id })">
             <!-- Content loaded via JS -->
            <div class="text-center text-muted p-3">
                <i class="fa fa-spinner fa-spin"></i> 加载评论中...
            </div>
        </div>
    </article>
}