@model HelpDrawerArticleViewModel

@if (Model.Article is null)
{
    <article class="help-drawer-article">
        <p class="eyebrow">Help</p>
        <h2>Help for this feature has not yet been written.</h2>
        @if (!string.IsNullOrWhiteSpace(Model.RequestedContextKey))
        {
            <p class="muted">Context key: @Model.RequestedContextKey</p>
        }
    </article>
}
else
{
    <article class="help-drawer-article">
        <p class="eyebrow">@Model.Article.Category</p>
        <h2>@Model.Article.Title</h2>
        @if (!string.IsNullOrWhiteSpace(Model.Article.QuickSummary))
        {
            <p class="lead-text">@Model.Article.QuickSummary</p>
        }
        <p>
            <a href="@Model.Article.Url">Open in Help Centre</a>
        </p>
        <div class="help-markdown-body">
            @Html.Raw(Model.RenderedHtml)
        </div>
        @if (Model.RelatedArticles.Any())
        {
            <section class="help-related-section">
                <h3>Related guides</h3>
                <ul>
                    @foreach (var related in Model.RelatedArticles)
                    {
                        <li>
                            <button type="button" data-help-open="@related.ContextKey">@related.Title</button>
                        </li>
                    }
                </ul>
            </section>
        }
    </article>
}