@page "/units"
@using Model
@using Telerik.Blazor
@using Telerik.Blazor.Components


<PageTitle>Units</PageTitle>

<div class="section-header d-flex align-items-center mb-4">
    <h1 class="mb-0">Units</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(UnitData.Name))" Title="Name" Width="200px"/>
                <GridColumn Field="@(nameof(UnitData.Hexite))" Title="Hexite" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.Flux))" Title="Flux" Width="90px" />
                
                <GridColumn Field="@(nameof(UnitData.DpsPerTotalCost))" Title="DpsPerTotalCost" Width="90px" />
                
                <GridColumn Field="@(nameof(UnitData.HealthPerTotalCost))" Title="HealthPerTotalCost" Width="90px" />
                
                <GridColumn Field="@(nameof(UnitData.Supply))" Title="Supply" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.ProductionTime))" Title="Production Time" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.Health))" Title="Health" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.Shields))" Title="Shields" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.ArmorRating))" Title="Armor Rating" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.MovementSpeed))" Title="Movement Speed" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.DamagePerSecond))" Title="Damage Per Second" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.AttackRange))" Title="Attack Range" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.Attributes))" Title="Attributes" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.Tier))" Title="Tier" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.Faction))" Title="Faction" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.Hotkey))" Title="Hotkey" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.BuildAtSameTime))" Title="Build At Same Time" Width="90px" />
                <GridColumn Field="@(nameof(UnitData.Limit))" Title="Limit" Width="90px" />
            </GridColumns>
        </TelerikGrid>
    </div>
}

@code {
    private List<UnitData>? gearNotes;

    protected override async Task OnInitializedAsync()
    {
        var index = Model.Units.All;
        gearNotes = index
            .ToList();
    }

}