@page "/"
@using Website.Client.Shared.Components.Products


<Title Value="Home - Unturned Store"></Title>

<Meta name="description" content="Marketplace of products for Unturned" />
<Meta property="og:title" content="Home" />


<Meta property="og:image" content="/img/logo.png" />
<Meta property="og:image:width" content="128" />
<Meta property="og:image:height" content="128" />
<Meta property="og:description" content="Marketplace of products for Unturned" />


<div class="text-center mb-3">
    <img src="/img/header.png" style="max-height: 250px;" />
    <div style="margin-top: -30px;">
        <h4 class="fw-bold unturned-font">Unturned Store</h4>
        <h6 class="text-muted">Marketplace of products for Unturned</h6>
    </div>
    
</div>

@if (Products != null)
{
    <div class="mb-3 mt-5 d-flex align-items-center justify-content-center">
        <div class="input-group" style="max-width: 600px;">
            <span class="input-group-text">
                <span class="desktop-only">Search Product</span>
                <span class="mobile-only"><i class="fas fa-search"></i></span>
            </span>
            <button type="button" class="btn btn-outline-secondary dropdown-toggle-split align-middle text-center" data-bs-toggle="dropdown" aria-expanded="false" style="width: 38px;">
                <i class="@GetCategoryIcon()" style="vertical-align: initial;"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item @Active(string.Empty)" @onclick="() => ChangeCategory(string.Empty)" href="javascript:void(0)">All</a></li>
                @foreach (string category in ProductCategoryConstants.Categories)
                {
                    <li><a class="dropdown-item @Active(category)" @onclick="@(() => ChangeCategory(category))" href="javascript:void(0)">@category</a></li>
                }
            </ul>
            <input type="text" class="form-control" placeholder="Name or Author" @bind="searchString" @bind:event="oninput" />

        </div>
        <div class="ms-1">
            <select class="form-select" @bind="orderBy">
                <option value="@EOrderBy.Newest">Newest</option>
                <option value="@EOrderBy.MostDownloads">Most Downloads</option>
                <option value="@EOrderBy.BestRated">Best Rated</option>
                <option value="@EOrderBy.PriceAsc">Price Ascending</option>
                <option value="@EOrderBy.PriceDesc">Price Descending</option>
            </select>
        </div>
    </div>
    <div class="mb-3">
        <div class="row row-cols-1 row-cols-sm-2 justify-content-center">
            @foreach (var product in OrderedProducts)
            {
                <ProductCard Product="product" Seller="product.Seller" />
            }
        </div>
    </div>
}
else
{
    <Progressbar />
}
