@page "/gear"
@inject DocsService DocsService

<PageTitle>Gear & Equipment</PageTitle>

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

@if (gearNotes == 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="grid-container">
        <TelerikGrid Data="@gearNotes" Pageable="true" PageSize="50" Sortable="true" FilterMode="@GridFilterMode.FilterRow"
                     Height="calc(100vh - 250px)">
            <GridColumns>
                <GridColumn Field="@(nameof(NoteInfo.Title))" Title="Item Name" Width="200px">
                    <Template>
                        <NavLink href="@($"docs/{(context as NoteInfo)!.Slug}")" class="fw-bold">@((context as NoteInfo)!.Title)</NavLink>
                    </Template>
                </GridColumn>
                <GridColumn Field="@(nameof(NoteInfo.Cost))" Title="Cost" Width="90px" />
                <GridColumn Field="@(nameof(NoteInfo.GearCategory))" Title="Category" Width="140px"/>
                <GridColumn Field="@(nameof(NoteInfo.Effect))" Title="Effect"/>
                <GridColumn Field="@(nameof(NoteInfo.Location))" Title="Acquisition" Width="150px"/>
            </GridColumns>
        </TelerikGrid>
    </div>
}

@code {
    private List<NoteInfo>? gearNotes;

    protected override async Task OnInitializedAsync()
    {
        var index = await DocsService.GetIndexAsync();
        gearNotes = index.Notes
            .Where(n => string.Equals(n.Category, "Gear", StringComparison.OrdinalIgnoreCase))
            .OrderBy(n => n.Title)
            .ToList();
    }

}