@using MP.MONO.UI.Components
@using MP.MONO.Core.DTO
@using MP.MONO.UI.Data

@inject CurrentDataService MMDataService

@if (ListRecords != null && ListRecords.Count > 0)
{
    <ul class="list-group">
        @foreach (var item in ListRecords)
        {
            @*<li class="list-group-item list-group-item-action">
                <div class="col-4">
                @if (!string.IsNullOrEmpty(item.CssIcon))
                {
                <div class="d-flex flex-column">
                <div class="small"><sup>@item.Title</sup></div>
                <div><i class="@item.CssIcon"></i></div>
                </div>
                }
                else
                {
                <div>@item.Title</div>
                }
                </div>
                <div class="col-8 float-end">
                <div class="d-flex flex-column">
                <div class="d-flex flex-row-reverse"><h5 class="float-end"><b>@item.Value</b></h5></div>
                @if (item.ShowBar)
                {
                <div class="w-100">
                <div class="progress" style="height: 0.3rem;">
                <div class="progress-bar" role="progressbar" style="@percProgress(item.ValueNum, item.MinVal, item.MaxVal)" aria-valuenow="@item.ValueNum" aria-valuemin="@item.MinVal" aria-valuemax="@item.MaxVal"></div>
                </div>
                </div>
                }
                </div>
                </div>
                </li>*@

            <li class="list-group-item list-group-item-action @cssActive(item.Title)" @onclick="()=>toggleSelect(item.Title)">
                <DisplayRecordComponent selVal="@SelVal" currRecord="@item"></DisplayRecordComponent>
            </li>
        }
    </ul>
}
else
{
    <ul>
        <li>Tool Life</li>
        <li>Tool Management</li>
    </ul>
    <LoadingDataSmall></LoadingDataSmall>
}