@using Website.Client.Shared.Components.Products
@using Website.Components.Alerts

<AlertBox ID="product-basicinfo" Group="productpage" />

<EditForm Model="Product" OnValidSubmit="SubmitAsync">
    <div class="mb-3">
        <label class="form-label">Name</label>
        <InputText class="form-control" @bind-Value="Product.Name" style="max-width: 500px;" />
        <div class="form-text">The name should be short, up to 20 characters</div>
    </div>

    <div class="mb-3">
        <label class="form-label">Description</label>
        <InputText class="form-control" @bind-Value="Product.Description" style="max-width: 800px;" />
        <div class="form-text">This is a short description of your product, for detailed information use tabs</div>
    </div>

    <div class="mb-3">
        <label class="form-label">Category</label>
        <InputSelect class="form-control" @bind-Value="Product.Category" style="max-width: 500px;">
            @foreach (string category in ProductCategoryConstants.Categories)
            {
                <option value="@category">@category</option>
            }
        </InputSelect>
        <div class="form-text">Set the category of your product</div>
    </div>

    <div class="mb-3">
        <label class="form-label">Tags</label>
        <SelectProductTags @bind-Tags="Product.Tags" ProductTags="ProductTags" />
        <div class="form-text">Set the tags of your product</div>
    </div>

    <div class="mb-3">
        <label class="form-label">GitHub Repo URL</label>
        <InputText class="form-control" @bind-Value="Product.GithubUrl" style="max-width: 500px;" />
        <div class="form-text">Enables a GitHub link on product page</div>
    </div>

    <div class="mb-3 position-relative">
        <label class="form-label">Price</label>
        <input type="number" step=".01" disabled="@(Product.Sale != null)" class="form-control" @bind="Product.Price" @bind:event="oninput" style="max-width: 150px;">
        <div class="form-text">Price of your product in USD ($)</div>
        @if (Product.Sale != null)
        {
            <div class="small text-danger">You can't change this value while a sale is active.</div>
        }
    </div>

    <div class="mb-3">
        <label class="form-label">Image</label>
        <InputFile class="form-control" OnChange="@OnInputFileChange" style="max-width: 500px;" />
        <div class="form-text">Image for your product, has to be .png</div>
    </div>

    @if (Product.ImageId != 0)
    {
        <img class="mb-3" src="api/images/@Product.ImageId" width="250" height="250" />
    }

    <div class="mb-3 form-check form-switch">
        <InputCheckbox @bind-Value="Product.IsLoaderEnabled" class="form-check-input" id="check-enableloader" disabled />
        <label class="form-check-label" for="check-enableloader">                             
            Use Loader
        </label>
        <div class="form-text">Determines whether your plugin uses UnturnedStore loader. You can't change it.</div>
    </div>

    @if (Product.Status == ProductStatus.Released)
    {
        <div class="mb-3 form-check form-switch">                        
            <label class="form-check-label">
                <InputCheckbox @bind-Value="Product.IsEnabled" disabled="@(Product.Sale != null)" class="form-check-input" />
                @(Product.IsEnabled ? "Visible" : "Hidden")
            </label>
            <div class="form-text">When your product is hidden it cannot be purchased and can only be downloaded by existing customers.</div>
            @if (Product.Sale != null)
            {
                <div class="small text-danger">You can't change this value while a sale is active.</div>
            }
        </div>
    }

    <div class="mb-3">
        <DataAnnotationsValidator />
        <ValidationSummary />
    </div>

    @if (IsDisabled)
    {
        <div class="mb-3">
            <div class="text-danger">Products that are using the loader can't be free!</div>
        </div>
    }

    <div class="mb-3">
        @if (isLoading)
        {
            <LoadingButton />
        }
        else
        {
            <button type="submit" class="btn btn-primary" disabled="@IsDisabled">Update</button>
        }
    </div>

</EditForm>