@using BlazorAppClean.Models;

<CascadingValue Value="@this">
    <div class="container">
        <div class="row">
            <div class="col-6">

                <div>

                    <div class="css-inv">
                        <CraftingItem Index="0" />
                        <CraftingItem Index="1" />
                        <CraftingItem Index="2" />
                        <CraftingItem Index="3" />
                        <CraftingItem Index="4" />
                        <CraftingItem Index="5" />
                        <CraftingItem Index="6" />
                        <CraftingItem Index="7" />
                        <CraftingItem Index="8" />
                        <CraftingItem Index="9" />
                        <CraftingItem Index="10" />
                        <CraftingItem Index="11" />
                        <CraftingItem Index="12" />
                        <CraftingItem Index="13" />
                        <CraftingItem Index="14" />
                        <CraftingItem Index="15" />
                        <CraftingItem Index="16" />
                        <CraftingItem Index="17" />
                    </div>
                </div>
            </div>
            <div class="col-6">

                <div>Available items:</div>
                <div>

                    <div class="css-grid d-sm-block">
                        <DataGrid TItem="Item"
                                  Data="@Items"
                                  TotalItems="@totalItem"
                                  PageSize="6"
                                  ShowPager
                                  Responsive>
                            <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
                            <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
                                <DisplayTemplate>
                                    @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
                                    {
                                        <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 60px; max-width: 60px" />
                                    }
                                    else
                                    {
                                        <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 60px" />
                                    }
                                </DisplayTemplate>
                            </DataGridColumn>
                            <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
                           
                           
                        </DataGrid>
                    </div>
                </div>

            </div>

            
        </div>
    </div>
</CascadingValue>