@using Dpz.Core.EnumLibrary
@using AngleSharp
@using Ganss.Xss
@model Dpz.Core.Public.ViewModel.Response.MumbleResponse
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration

@{
    var rule = Configuration.GetSection("XSS").Get<CrossSiteRule>();
    var sanitizer = rule?.CustomHtmlSanitizer() ?? new HtmlSanitizer();
    var context = BrowsingContext.New(AngleSharp.Configuration.Default);

    async Task<string> ProcessContentAsync(string html)
    {
        var document = await context.OpenAsync(y => y.Content(html));
        var links = document.GetElementsByTagName("a");
        foreach (var link in links)
        {
            var href = link.GetAttribute("href");
            if (href != null && !href.StartsWith("javascript", StringComparison.CurrentCultureIgnoreCase))
            {
                link.SetAttribute("target", "_blank");
                link.SetAttribute("rel", "noopener noreferrer");
            }
        }

        var images = document.GetElementsByTagName("img");
        foreach (var img in images)
        {
            var src = img.GetAttribute("src");
            if (string.IsNullOrEmpty(src))
            {
                img.SetAttribute("src", $"{Program.AssetsHost}/images/notfound.png");
            }

            img.SetAttribute("loading", "lazy");
        }

        return sanitizer.Sanitize(document.Body?.InnerHtml ?? "");
    }
}

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

            <div class="mumble-card__content markdown-body">
                @Html.Raw(await ProcessContentAsync(Model.Markdown?.MarkdownToHtml(false) ?? ""))
            </div>

            <div class="mumble-card__footer">
                <span class="mumble-action mumble-action--active" title="详情">
                    <i class="fa fa-info-circle"></i>
                    <span>详情页</span>
                </span>

                <span class="mumble-action" title="评论">
                    <i class="fa fa-commenting"></i>
                    <span data-comment-count>@Model.CommentCount</span>
                </span>

                <button class="mumble-action" data-like-id="@Model.Id" title="点赞">
                    <i class="fa fa-thumbs-up"></i>
                    <span data-like-count>@Model.Like</span>
                </button>
            </div>

            <!-- Comments are always visible in detail view -->
            <div class="mumble-comments"
                 id="comments-@Model.Id">
                <div class="text-muted p-3">
                    <partial name="_GlobalCommentPartial" model="(CommentNode.Mumble,Model.Id)"/>
                </div>
            </div>
        </article>
    </main>

    <aside class="mumble-layout__sidebar">
        <!-- Optional: Could add recent mumbles or history here if desired, otherwise empty or ad -->
        <div class="history-widget">
            <h3 class="history-widget__title">返回</h3>
            <div class="history-widget__list">
                <a asp-action="Index" asp-controller="Mumble" class="mumble-action" data-pjax>
                    <i class="fa fa-arrow-left"></i> 返回碎碎念列表
                </a>
            </div>
        </div>
    </aside>
</div>