@page "/seller/products"
@using Website.Client.Pages.Seller.ProductsPage.Components
@using Website.Components.Alerts
@using Website.Components.DataTable
@using Website.Client.Shared.Components.Products

<Title Value="@($"Products Seller - Unturned Store")"></Title>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Seller</li>
        <li class="breadcrumb-item active" aria-current="page">Products</li>
    </ol>
</nav>

<div class="mt-2">
    @if (Products != null)
    {
        <div>
            <AlertBox ID="products-main" Group="productspage" />
        </div>
        
        <DataTable TItem="MProduct" Data="Products.OrderByDescending(x => x.CreateDate)">
            <DataTableTitle TItem="MProduct">
                <div class="d-md-flex d-block align-items-center">
                    <div class="fs-5">
                        Your Products (@context.Items.Count())
                    </div>
                    <div class="ms-2">
                        <button class="btn btn-sm btn-primary" @onclick="ShowModalAsync">
                            Add Product
                        </button>
                    </div>
                </div>        
            </DataTableTitle>
            <DataTableColumn TItem="MProduct" Name="ID" Field="x => x.Id" IsSearchable="true" SearchType="ESearchType.Exact" />
            <DataTableColumn TItem="MProduct" Name="Name" Field="x => x.Name" IsSearchable="true" SearchType="ESearchType.Contains" Context="product">
                <div class="d-flex align-items-center">
                    <div>
                        <img src="/api/images/@product.ImageId" width="30" height="30" />
                    </div>
                    @if (product.IsEnabled)
                    {
                        <div class="ms-2">
                            <a href="/seller/products/@product.Id" class="text-decoration-none">
                                @product.Name
                            </a>
                        </div>
                    } else
                    {
                        <div class="ms-2">
                            <a href="/seller/products/@product.Id" class="text-decoration-none text-muted">
                                @product.Name
                            </a>
                        </div>                        
                    }
                </div>
            </DataTableColumn>
            <DataTableColumn TItem="MProduct" Name="Price" Field="x => x.DiscountedPrice()" Context="product" IsSearchable="false">
                <ColumnProductPrice Product="product" />
            </DataTableColumn>
            <DataTableColumn TItem="MProduct" Name="Status" Field="x => x.Status" Context="product" IsSearchable="true" SearchType="ESearchType.Exact">
                <ProductStatusText Status="product.Status" />
            </DataTableColumn>
            <DataTableColumn TItem="MProduct" Name="" Context="product" Field="x => string.Empty" IsSearchable="false">
                <div class="d-flex">
                    <div>
                        <a class="btn btn-outline-success btn-sm" href="/seller/products/@product.Id">
                            <i class="fas fa-edit"></i>
                        </a>
                    </div>
                    <div class="ms-2">
                        <a class="btn btn-outline-primary btn-sm" href="/products/@product.Id" target="_blank">
                            <i class="fas fa-eye"></i>
                        </a>
                    </div>                    
                </div>                
            </DataTableColumn>
        </DataTable>

    } else
    {
        <Progressbar />
    }
</div>

<CreateProductModal @ref="Modal" OnProductAdded="AddProductAsync" />