@using BlazorT.Models;
@using BlazorT.Composants 
<CascadingValue Value="@this">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div><h2>My inventory</h2></div>

                <div>

                    <div class="css-recipe">
                        @for (int i = 0; i < NombreRecipes; i++)
                        {
                            <InventoryItem Index="@i" />
                        }


                    </div>
                </div>
 
            </div>
            <div class="col-6">



                <div><h2>LES ELEMENTS DISPONIBLES:</h2></div>
               
                <div class="@BS.Input_Group mb-2">
                    <span class="@BS.Input_Group_Text">RECHERCHE</span>
                    <BSInput   placeholder="By name" Value="searchValue" ValueChanged="(string e) => onSearching(e)" UpdateOnInput="true" />
                </div>
                <BSDataTable @ref="_customFilterRef" FetchItems="FetchItems" PaginationBottom="true" StartPage="1" RowsPerPage="20" Context="item" Items="Items" IsResponsive="true" IsStriped="true">
                    <Header>
                        <BSDataTableHead TValue="Item" Sortable="true" Column="@(nameof(Item.Id))">Id</BSDataTableHead>
                        <BSDataTableHead TValue="Item" Sortable="true" Column="@(nameof(Item.ImageBase64))" ColumnFilter="false">Image</BSDataTableHead>

                        <BSDataTableHead TValue="Item" Sortable="true" Column="@(nameof(Item.Name))" ColumnFilter="true">Name</BSDataTableHead>
                        <BSDataTableHead  TValue="Item" Sortable="false"  >Action</BSDataTableHead>
                    </Header>
                    <Body>
                        <InventoryItemTR Item="item" />
                    </Body>
                </BSDataTable>
            </div>


 
        </div>
    </div>


</CascadingValue>
