@page "/edit/{Id:int}"

<h3>Edit</h3>

<EditForm Model="@itemModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="display-name">
            Display name:
            <InputText id="display-name" @bind-Value="itemModel.DisplayName" />
        </label>
    </p>
    <p>
        <label for="name">
            Name:
            <InputText id="name" @bind-Value="itemModel.Name" />
        </label>
    </p>
    <p>
        <label for="stack-size">
            Stack size:
            <InputNumber id="stack-size" @bind-Value="itemModel.StackSize" />
        </label>
    </p>
    <p>
        <label for="max-durability">
            Max durability:
            <InputNumber id="max-durability" @bind-Value="itemModel.MaxDurability" />
        </label>
    </p>
    <p>
        Enchant categories:
        <div>
            @foreach (var enchant in enchantCategories)
            {
                <label>
                    <input type="checkbox"
                       checked="@(itemModel.EnchantCategories.Contains(enchant) ? "checked" : null)"
                       @onchange="@(e => OnEnchantCategoriesChange(enchant, e.Value))" />
                    @enchant
                </label>
            }
        </div>
    </p>
    <p>
        Repair with:
        <div>
            @foreach (var material in repairWith)
            {
                <label>
                    <input type="checkbox"
                       checked="@(itemModel.EnchantCategories.Contains(material) ? "checked" : null)"
                       @onchange="@(e => OnRepairWithChange(material, e.Value))" />
                    @material
                </label>
            }
        </div>
    </p>
    <p>
        <label>
            Current Item image:
            <img src="data:image/png;base64, @(itemModel.ImageBase64)" class="img-thumbnail" title="@itemModel.DisplayName" alt="@itemModel.DisplayName" style="min-width: 50px; max-width: 150px" />
        </label>
    </p>
    <p>
        <label>
            Item image:
            <InputFile OnChange="@LoadImage" accept=".png" />
        </label>
    </p>
    <p>
        <label>
            Accept Condition:
            <InputCheckbox @bind-Value="itemModel.AcceptConditions" />
        </label>
    </p>

    <button type="submit">Submit</button>
</EditForm>