@page "/list"
@using TP_Blazor.Models

<h3>@Localizer["Title"]</h3>

@*@if (items!=null)
    {
        <table class="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Display Name</th>
                    <th>Stack Size</th>
                    <th>Maximum Durability</th>
                    <th>Enchant Categories</th>
                    <th>Repair With</th>
                    <th>Created Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in items)
                {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.DisplayName</td>
                        <td>@item.StackSize</td>
                        <td>@item.MaxDurability</td>
                        <td>@(string.Join(", ", item.EnchantCategories))</td>
                        <td>@(string.Join(", ", item.RepairWith))</td>
                        <td>@item.CreatedDate.ToShortDateString()</td>
                    </tr>
                }
            </tbody>
        </table>

    }*@

<div>
    <NavLink class="btn btn-primary" href="add" Match="NavLinkMatch.All">
        <i class="fa fa-plus"></i> @Localizer["btnTitle"]
    </NavLink>
</div>

<DataGrid TItem="Item" Data="@items" ReadData="@OnReadData" TotalItems="@totalItem" ShowPager PageSize="10" Responsive>
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
        <DisplayTemplate>
            @*<img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />*@
            @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="() => OnDelete(context.Id)"><i class="fa fa-trash"></i> Supprimer</button>
            </DisplayTemplate>
        </DataGridColumn>
</DataGrid>