@page "/list"
@using BlazorT.Models;
@using BlazorT.Composants
    <h3>List</h3>

 <ShowItems Items="Etudiants">
        <ShowTemplate Context="EtuContext">
            
                <div class="card-header">
                    My Templated Component
                </div>
            

            
                <div class="card-header">
                    Hi I'm duplicated header
                </div>
           
                <div class="card-body">
                    <h5>Welcome To Template Component</h5>
                    <div> NOM : @EtuContext.Nom </div>
                    <div> PRENOM : @EtuContext.Prenom</div>
                </div>
           
                <div class="card-footer text-muted">
                    Click Here <br />
                </div>
             
        </ShowTemplate>
    </ShowItems>

    


    <div>
        <NavLink class="btn btn-primary" href="Add" Match="NavLinkMatch.All">
            <i class="fa fa-plus"></i> Ajouter
        </NavLink>
    </div>
    <DataGrid TItem="Item"
              Data="@items"
              
              ReadData="@OnReadData"
              TotalItems="@totalItem"
              PageSize="10" 
              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: 50px; max-width: 150px" />
                }
                else
                {
                    <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
                }
            </DisplayTemplate>
        </DataGridColumn>
        <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
        <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
        <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
        <DataGridColumn TItem="Item" Field="@nameof(Item.EnchantCategories)" Caption="Enchant categories">
            <DisplayTemplate>
                @(string.Join(", ", ((Item)context).EnchantCategories))
            </DisplayTemplate>
        </DataGridColumn>
        <DataGridColumn TItem="Item" Field="@nameof(Item.RepairWith)" Caption="Repair with">
            <DisplayTemplate>
                @(string.Join(", ", ((Item)context).RepairWith))
            </DisplayTemplate>
        </DataGridColumn>
        <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />

        <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Action">
            <DisplayTemplate>
                <a href="Edit/@(context.Id)" class="btn btn-primary"><i class="fa fa-edit"></i> Editer</a>
                <button type="button" class="btn btn-primary" @onclick="() => OnDeleteAsync(context.Id)"><i class="fa fa-trash"></i> Supprimer</button>
            </DisplayTemplate>
        </DataGridColumn>

     
    </DataGrid>