@model HelpArticleDiagnosticViewModel
@{
    ViewData["Title"] = $"Help Article - {Model.Article.ContextKey}";
}

<nav class="breadcrumb-trail" aria-label="Breadcrumb">
    <a asp-action="Index">Help Diagnostics</a>
    <span>@Model.Article.ContextKey</span>
</nav>

<div class="page-heading">
    <div>
        <p class="eyebrow">Parsed help article</p>
        <h1>@Model.Article.Title</h1>
        <p class="lead-text">@Model.Article.RelativePath</p>
    </div>
    <a class="btn btn-outline-secondary" asp-action="Index">Back to diagnostics</a>
</div>

@if (!Model.Article.IsValid)
{
    <div class="alert alert-warning">
        <strong>Validation issues:</strong>
        @string.Join("; ", Model.Article.ValidationIssues)
    </div>
}

<section class="asset-detail-grid">
    <article class="plain-card">
        <h2>Metadata</h2>
        <dl class="row">
            <dt class="col-sm-3">Context key</dt>
            <dd class="col-sm-9">@Model.Article.ContextKey</dd>
            <dt class="col-sm-3">Category</dt>
            <dd class="col-sm-9">@Model.Article.Category</dd>
            <dt class="col-sm-3">Tags</dt>
            <dd class="col-sm-9">@string.Join(", ", Model.Article.Tags)</dd>
            <dt class="col-sm-3">Micro</dt>
            <dd class="col-sm-9">@Model.Article.Micro</dd>
            <dt class="col-sm-3">Quick title</dt>
            <dd class="col-sm-9">@Model.Article.QuickTitle</dd>
            <dt class="col-sm-3">Quick summary</dt>
            <dd class="col-sm-9">@Model.Article.QuickSummary</dd>
            <dt class="col-sm-3">Screenshot</dt>
            <dd class="col-sm-9">@Model.Article.Screenshot</dd>
        </dl>
    </article>
    <article class="plain-card">
        <h2>Markdown body</h2>
        <pre class="mb-0 text-wrap">@Model.Article.MarkdownContent</pre>
    </article>
</section>