@page "/overview"
@inject DocsService DocsService

<PageTitle>Overview</PageTitle>

@if (loading)
{
    <div class="d-flex justify-content-center py-5">
        <div class="spinner-border text-success" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
}
else if (doc == null)
{
    <h1>Overview Not Found</h1>
    <p>The overview document could not be found.</p>
}
else
{
    <div class="section-header d-flex align-items-center mb-4">
        <h1 class="mb-0">@doc.Title</h1>
        <div class="ms-3 flex-grow-1 border-bottom opacity-25"></div>
    </div>

    @if (!string.IsNullOrEmpty(doc.FrontmatterHtml))
    {
        <details class="frontmatter-section" open>
            <summary>Frontmatter</summary>
            @((MarkupString)doc.FrontmatterHtml)
        </details>
    }

    <div class="markdown-body overview-markdown">
        @((MarkupString)doc.HtmlContent)
    </div>
}

@code {
    private NoteDocument? doc;
    private bool loading = true;

    protected override async Task OnInitializedAsync()
    {
        doc = await DocsService.GetNoteAsync("overview");
        loading = false;
    }
}