@using Ganss.Xss
@using Markdig;
@using Pek.Markdig.HighlightJs
@model FastBlog.Core.Models.Blogs.Blog

@{
    ViewBag.Title = Model.Metadata.Title;
    var pipelineBuilder = new MarkdownPipelineBuilder()
        .UseSmartyPants()
        .UseEmojiAndSmiley()
        .UseAlertBlocks()
        .UseAdvancedExtensions()
        .UseHighlightJs();
    var sanitizer = new HtmlSanitizer();
    sanitizer.AllowedAttributes.Add("class");
    var pipeline = pipelineBuilder.Build();
}

<div class="@(Model.Metadata.FullWidth ? "fw" : "container") markdown">

    @if (Model.Metadata.ShowDetails)
    {
        <hr/>
        @if (Model.Metadata.ImageUrl is not null)
        {
            <img src="@Model.Metadata.ImageUrl" alt="@Model.Metadata.Title" class="blog-image"/>
            <hr/>
        }

        <div class="blog-details">
            <h1>@Model.Metadata.Title</h1>
            @if (Model.Metadata.Signature is not null)
            {
                <h3>
                    <span style="opacity: 0.4">by</span> @Model.Metadata.Signature
                </h3>
            }
            <p>@($"{Model.Metadata.CreatedAt:MMMM dd, yyyy}, updated {Model.Metadata.ModifiedAt:MMMM dd, yyyy}")</p>
        </div>
        <hr/>
        <br/>
    }

    @Html.Raw(sanitizer.Sanitize(Markdown.ToHtml(Model.Text, pipeline)))
</div>

<br>

<div class="container">
    <hr/>
    <article>
        <header>
            <h3>Editor's controls</h3>
        </header>
        <body>
        <div class="grid">
            <div>
                <a href="/edit/@Model.Metadata.Id">
                    <button class="btn-fw">
                        Edit
                    </button>
                </a>
            </div>
            <div>
                <button class="btn-fw secondary" hx-delete="/blogs/@Model.Metadata.Id">
                    Delete
                </button>
            </div>
        </div>
        </body>
    </article>
</div>
