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

<nav class="breadcrumb-trail" aria-label="Breadcrumb">
    <a asp-action="Index">Help</a>
    <a asp-action="Category" asp-route-category="@Model.Article.Category">@Model.Article.Category</a>
    <span>@Model.Article.Title</span>
</nav>

<div class="page-heading">
    <div>
        <p class="eyebrow">@Model.Article.Category</p>
        <h1>@Model.Article.Title</h1>
        @if (!string.IsNullOrWhiteSpace(Model.Article.QuickSummary))
        {
            <p class="lead-text">@Model.Article.QuickSummary</p>
        }
        @if (Model.Article.Tags.Any())
        {
            <p class="muted">Tags: @string.Join(", ", Model.Article.Tags)</p>
        }
    </div>
    <a class="btn btn-outline-secondary" asp-action="Index">Help Centre</a>
</div>

<section class="plain-card">
    <div class="help-markdown-body">
        @Html.Raw(Model.RenderedHtml)
    </div>
</section>

@if (Model.RelatedArticles.Any())
{
    <section class="list-section">
        <h2>Related guides</h2>
        <div class="asset-card-grid">
            @foreach (var article in Model.RelatedArticles)
            {
                <article class="plain-card">
                    <h3><a asp-action="Article" asp-route-key="@article.ContextKey">@article.Title</a></h3>
                    <p>@article.QuickSummary</p>
                    <span class="status-pill">@article.Category</span>
                </article>
            }
        </div>
    </section>
}