@page "/docs"
@inject DocsService DocsService

<PageTitle>Documentation</PageTitle>

<div class="section-header d-flex align-items-center mb-4">
    <h1 class="mb-0">Documentation</h1>
    <div class="ms-3 flex-grow-1 border-bottom opacity-25"></div>
</div>

@if (index == null)
{
    <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
{
    <div class="docs-grid">
        @foreach (var note in index.Notes.OrderBy(n => n.Title))
        {
            <NavLink href="@($"docs/{note.Slug}")" class="docs-card">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <span class="badge bg-dark text-success border border-success border-opacity-25">@note.Category</span>
                </div>
                <h3>@note.Title</h3>
                <p class="text-muted small mb-0">Explore details about @note.Title</p>
            </NavLink>
        }
    </div>
}

@code {
    private NotesIndex? index;

    protected override async Task OnInitializedAsync()
    {
        index = await DocsService.GetIndexAsync();
    }
}