@page "/Inventaire"
@using System.Globalization
@using ValblazeProject.Components
@using ValblazeProject.Models

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/component-custom-switch.css" rel="stylesheet">

<main class="contentInvent">
    <div class="inventaire">
        <h3>@Localizer["Inventaire"]</h3>
        <div class="caseInvent">
            @for(int i=0; i<10; i++){
                <CraftingItem Index="i"/>
            }
        </div>
        <label class="mt-2">Actions</label>
        <div class="actions" id="actions"></div>
    </div>
    
     <div class="maList">
        <div class="toolSearch">
            <label>
                @Localizer["Recherche"]
                <input type="text" @bind-value="search"/>
            </label>
            <label class="LabelFiltre">
                @Localizer["Trie"]
                <input class="filtre" @bind-value="trieActive" onclick="@TrieChanged" type="checkbox">
            </label>
        </div>


       
        <DataGrid TItem="Item"
                  Data="@items"
                  ReadData="@OnReadData"
                  TotalItems="@totalItem"
                  PageSize="@totalSizeByPage"
                  @ref="dataGrid"
                  ShowPager
                  Responsive>
            <DataGridColumn TItem="Item" Field="@nameof(Item.Id)">
                <DisplayTemplate>
                    @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
                    {
                         <div 
                         ondragover="event.preventDefault();"
                         draggable="true"
                         @ondragstart="@OnDragStart"
                         @ondrop="@OnDrop"
                         @ondragenter="@OnDragEnter"
                         @ondragleave="@OnDragLeave">

                        @if (context != null)
                        {
                            //<img src="data:image/png;base64, @(Item.ImageBase64)" class="img-thumbnail" title="@Item.DisplayName" alt="@Item.DisplayName" style="min-width: 50px; max-width: 100px" />
                            <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 50px" />
                        }
                        </div>
                        //<img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 50px" />
                        //<label>@context.DisplayName</label>
                    }
                    else
                    {
                        <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 50px" />
                    }
                </DisplayTemplate>
            </DataGridColumn>
            <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)"/>
        </DataGrid>
    </div>
</main>