@using WebServer.Components.Molecule
@using Core
@rendermode InteractiveServer

<input class="filter" @onchange=Filter/>
<div class="specs d-flex flex-row flex-wrap justify-content-start">
    @foreach(var i in _specs.Count == 0 ? Data : _specs)
    {
        <div class="m-2">
            <NavigationCard DisplayName=@i.GetFileName() Link=@($"/details/{i.GetFolder()}/{i.GetFileName()}") />
        </div>
    }
</div>

@code {

    [Parameter] public List<Location> Data { get; set; }
    private List<Location> _specs = [];
    
    private void Filter(ChangeEventArgs e)
    {
        string filter = e.Value?.ToString() ?? string.Empty;
        _specs = Data.Where(s => s.Path.Contains(filter)).ToList();
        StateHasChanged();
    }
}

<style>
    .filter{
        border-radius: 4px;
    }
</style>