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

<div class="page-heading">
    <div>
        <p class="eyebrow">Developer diagnostics</p>
        <h1>Help Diagnostics</h1>
        <p class="lead-text">Markdown article discovery and front matter validation.</p>
    </div>
</div>

<section class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="plain-card">
            <p class="eyebrow">Articles found</p>
            <p class="writer-kpi">@Model.TotalArticles</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="plain-card">
            <p class="eyebrow">Valid</p>
            <p class="writer-kpi">@Model.TotalValidArticles</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="plain-card">
            <p class="eyebrow">Invalid</p>
            <p class="writer-kpi">@Model.TotalInvalidArticles</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="plain-card">
            <p class="eyebrow">Coverage</p>
            <p class="writer-kpi">@Model.CoveragePercentage%</p>
        </div>
    </div>
</section>

<section class="list-section">
    <h2>Coverage</h2>
    @if (!Model.Articles.Any())
    {
        <p class="muted">No help articles were found.</p>
    }
    else
    {
        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th>Context key</th>
                        <th>Title</th>
                        <th>Category</th>
                        <th>Status</th>
                        <th>Validation issues</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var article in Model.Articles.OrderBy(x => x.ContextKey).ThenBy(x => x.RelativePath))
                    {
                        <tr>
                            <td>
                                <a asp-action="Article" asp-route-path="@article.RelativePath">@article.ContextKey</a>
                            </td>
                            <td>@article.Title</td>
                            <td>@article.Category</td>
                            <td>
                                @if (article.IsValid)
                                {
                                    <span class="badge text-bg-success">Valid</span>
                                }
                                else
                                {
                                    <span class="badge text-bg-warning">Invalid</span>
                                }
                            </td>
                            <td>
                                @string.Join("; ", article.ValidationIssues)
                                @if (!article.IsValid)
                                {
                                    <a class="ms-2" asp-action="Article" asp-route-path="@article.RelativePath">View invalid article</a>
                                }
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    }
</section>