<style rel="stylesheet">
    .card-bg-top {
        width: 100%;
        height: 80px;
        object-fit: cover;
    }

    .avatar-border {
        border: 2px solid @User.BackgroundColor;
    }

    .bg-user {
        background-color: @User.BackgroundColor;
    }

    .input-group > .ctooltip-wrapper > .form-control {
        margin-left: -1px;
        border-radius: 0;
        padding: .25rem .5rem;
        font-size: .875rem;
        position: relative;
        flex: 1 1 auto;
    }
</style>

<div class="card">
    <div class="card-bg-top bg-user" />
    <div class="text-center" style="margin-top: -60px;">
        @if (User.AvatarImageId.HasValue)
        {
            <img class="rounded-circle avatar-border shadow-lg" src="api/images/@User.AvatarImageId" style="height: 80px; width: 80px; " />
        }
        else
        {
            <img class="rounded-circle avatar-border shadow-lg" src="/img/profiles/default_avatar.png" style="height: 80px; width: 80px;" />
        }
    </div>
    <div class="card-body" style="margin-top: -20px;">
        <div class="fs-5 fw-bold">
            @User.Name
        </div>
        <div class="dropdown-divider" />
        <div>
            <div class="input-group input-group-sm flex-nowrap">
                <a href="@User.SteamProfileUrl" target="_blank" class="btn btn-secondary">
                    <i class="fab fa-steam-square"></i>
                </a>
                <Tooltip Text="Copied!">
                    <input class="form-control border-custom text-center" style="padding: .25rem .5rem; font-size: .875rem;" onclick="this.select(); document.execCommand('Copy');" value="@User.SteamId" readonly />
                </Tooltip>
            </div>
        </div>
        <div class="dropdown-divider" />
        <div class="fw-bold">Badges</div>
        <div>
            <span class="badge bg-primary m-1">@User.Role</span>
            @if (RoleConstants.IsSeller(User.Role) && User.Sales > 0)
            {
                <span class="badge bg-info m-1">@User.Sales sale@(User.Sales == 1 ? "" : "s")</span>
            }
            @if (User.IsVerifiedSeller)
            {
                <span class="badge bg-success m-1"><i class="bi bi-patch-check-fill"></i> Verified Seller</span>
            }
            
        </div>
        <div class="dropdown-divider" />
        <div class="d-grid gap-2">
            @if (UserService.UserId != User.Id)
            {
                <a class="btn btn-sm btn-primary @Disabled()" href="/messages/create/@User.Id">
                    <i class="far fa-comments"></i> Send Message
                </a>
            }
            @if (UserService.UserId == User.Id)
            {
                <a class="btn btn-sm btn-success" href="/settings">
                    <i class="bi bi-pencil-square"></i> Update Profile
                </a>
            }
        </div>
    </div>
</div>

@code {
    [Parameter]
    public UserProfile User { get; set; }

    [Inject]
    public AuthenticatedUserService UserService { get; set; }

    public string Disabled() => UserService.IsAuthenticated ? "" : "disabled";
}
