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

<nav class="breadcrumb-trail" aria-label="Breadcrumb">
    <a href="/help">Help</a>
    <span>@Model.CategoryName</span>
</nav>

<div class="page-heading">
    <div>
        <p class="eyebrow">Help category</p>
        <h1>@Model.CategoryName</h1>
        <p class="lead-text">@Model.Articles.Count article@(Model.Articles.Count == 1 ? "" : "s")</p>
    </div>
    <a class="btn btn-outline-secondary" href="/help">Help Centre</a>
</div>

<section class="list-section">
    @if (!Model.Articles.Any())
    {
        <p class="muted">No help articles are available in this category yet.</p>
    }
    else
    {
        <div class="asset-card-grid">
            @foreach (var article in Model.Articles)
            {
                <article class="plain-card">
                    <h2><a href="@article.Url">@article.Title</a></h2>
                    <p>@article.QuickSummary</p>
                    @if (article.Tags.Any())
                    {
                        <p class="muted">Tags: @string.Join(", ", article.Tags)</p>
                    }
                </article>
            }
        </div>
    }
</section>