@model HelpCentreIndexViewModel
@{
    ViewData["Title"] = "Help";
}

<nav class="breadcrumb-trail" aria-label="Breadcrumb">
    <span>Help</span>
</nav>

<div class="page-heading">
    <div>
        <p class="eyebrow">Guidance</p>
        <h1>Help Centre <help-icon key="helpCentre.overview" /></h1>
        <p class="lead-text">Find practical guidance for planning, tracking, and shaping your story in PlotDirector.</p>
    </div>
</div>

<section class="plain-card mb-4">
    <form method="get" asp-action="Index" class="row g-2 align-items-end">
        <div class="col-md-9">
            <label class="form-label" for="q">Search help articles</label>
            <input class="form-control" id="q" name="q" value="@Model.Query" placeholder="Search by title, topic, tag or phrase" />
        </div>
        <div class="col-md-3">
            <button class="btn btn-primary w-100" type="submit">Search</button>
        </div>
    </form>
</section>

@if (Model.HasSearch)
{
    <section class="list-section">
        <h2>Search results</h2>
        @if (!Model.SearchResults.Any())
        {
            <div class="empty-panel compact">
                <p>No matching help articles were found.</p>
                <p class="muted">Try a different search term.</p>
            </div>
        }
        else
        {
            <div class="asset-card-grid">
                @foreach (var article in Model.SearchResults)
                {
                    <article class="plain-card">
                        <h3><a href="@article.Url">@article.Title</a></h3>
                        <p>@article.QuickSummary</p>
                        <span class="status-pill">Category: @article.Category</span>
                    </article>
                }
            </div>
        }
    </section>
}

<section class="list-section">
    <div class="story-bible-section-heading">
        <div>
            <p class="eyebrow">Browse</p>
            <h2>Categories</h2>
        </div>
        <span class="soft-count">@Model.ArticleCount article@(Model.ArticleCount == 1 ? "" : "s")</span>
    </div>
    @if (!Model.Categories.Any())
    {
        <p class="muted">No help articles have been added yet.</p>
    }
    else
    {
        <div class="asset-card-grid">
            @foreach (var category in Model.Categories)
            {
                <article class="plain-card">
                    <h3><a href="@category.Url">@category.CategoryName</a></h3>
                    <p class="muted">@category.ArticleCount article@(category.ArticleCount == 1 ? "" : "s")</p>
                </article>
            }
        </div>
    }
</section>

@if (Model.RecentArticles.Any())
{
    <section class="list-section">
        <h2>Recently added</h2>
        <div class="table-responsive">
            <table class="table align-middle">
                <tbody>
                    @foreach (var article in Model.RecentArticles)
                    {
                        <tr>
                            <td><a href="@article.Url">@article.Title</a></td>
                            <td>@article.Category</td>
                            <td>@article.QuickSummary</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </section>
}