@page "/users/{UserId:int}"
@using Website.Client.Pages.Home.UserPage.Components
@using Website.Client.Shared.Components.Products

<Meta property="og:image" content="@string.Concat("/api/users/", UserId, "/avatar")" />
<Meta property="og:image:width" content="128" />
<Meta property="og:image:height" content="128" />

@if (User != null)
{
    <Title Value="@string.Join(" - ", User.Name, "Unturned Store")"></Title>

    <Meta name="description" content="@User.Biography" />
    <Meta property="og:title" content="@User.Name" />

    <Meta property="og:description" content="@User.Biography" />

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item">Users</li>
            <li class="breadcrumb-item active">@User.Name</li>
        </ol>
    </nav>

    <div class="row mt-5 mb-3">
        <div class="col-md-3">
            <UserCard User="User" />
        </div>
        <div class="col-md-9">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link @TabClass(EUserTab.Biography)" @onclick="() => ChangeTab(EUserTab.Biography)" href="javascript:void(0)">Biography</a>
                </li>
                @if (RoleConstants.AdminAndSeller.Contains(User.Role))
                {
                    <li class="nav-item">
                        <a class="nav-link @TabClass(EUserTab.Products)" @onclick="() => ChangeTab(EUserTab.Products)" href="javascript:void(0)">Products (@User.Products.Count)</a>
                    </li>
                }
            </ul>
            @if (currentTab == EUserTab.Biography)
            {
                <BiographyTab User="User" />
            }
            else if (currentTab == EUserTab.Products)
            {
                <div class="mb-3 mt-3">
                    <table class="table border border-1 table-hover">
                        <tbody>
                            @foreach (var product in User.Products.OrderByDescending(x => x.TotalDownloadsCount))
                            {
                                <tr style="cursor: pointer;" @onclick="() => GoToProduct(product)">
                                    <td class="align-middle">
                                        <img src="api/images/@product.ImageId" width="40" height="40" class="rounded" />
                                        <span class="fw-bold ms-1 align-middle">@product.Name</span>
                                    </td>
                                    <td class="align-middle">
                                        <ProductRating Product="product" />
                                    </td>
                                    <td class="align-middle fs-6">
                                        <span><i class="bi bi-download"></i> @product.TotalDownloadsCount</span>
                                    </td>
                                    <td class="align-middle fs-6">
                                        <ProductPrice Product="product" SingleLine="true" DiscountClass="d-flex gap-1 flex-row-reverse justify-content-end" />
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            }

        </div>
    </div>
}
else if (isLoaded)
{
    <StatementText>User not found</StatementText>
}
else
{
    <Progressbar />
}