@using WatchIt.Website.Components.Subcomponents.Common

@inherits Component



<div id="base" class="vstack">
    <AccountPicture Class="shadow position-absolute z-1 start-50 translate-middle" Item="@(Data)" Size="240"/>
    <div class="panel z-0">
        <div class="vstack gap-3">
            <div id="space" class="container-grid"></div>
            <div class="d-flex justify-content-center">
                <h3 class="fw-bold m-0">@(Data.Username)</h3>
            </div>
            @if (!string.IsNullOrWhiteSpace(Data.Description))
            {
                <span class="text-center w-100 mb-2">
                    @(Data.Description)
                </span>
            }
            <div class="d-flex flex-wrap justify-content-center metadata-pill-container">
                <div class="metadata-pill"><strong>Email:</strong> @(Data.Email)</div>
                @if (!string.IsNullOrWhiteSpace(Data.Gender?.Name))
                {
                    <div class="metadata-pill"><strong>Gender:</strong> @(Data.Gender?.Name)</div>
                }
                <div class="metadata-pill"><strong>Joined:</strong> @(Data.JoinDate.LocalDateTime.ToShortDateString())</div>
                <div class="metadata-pill"><strong>Last active:</strong> @(Data.ActiveDate.LocalDateTime.ToShortDateString())</div>
                @if (Data.IsAdmin)
                {
                    <div class="metadata-pill"><strong>Admin</strong></div>
                }
                @if (LoggedUserData is not null && Data.Id != LoggedUserData.Id)
                {
                    <div role="button" class="metadata-pill @(!_followLoading ? "metadata-pill-hoverable" : string.Empty)" @onclick="@(Follow)">
                        @if (_followLoading)
                        {
                            <div class="spinner-border spinner-border-sm"></div>
                        }
                        else
                        {
                            if (Followers.Any(x => x.Id == LoggedUserData.Id))
                            {
                                <span><i class="fa fa-eye-slash" aria-hidden="true"></i> Unfollow</span>
                            }
                            else
                            {
                                <span><i class="fa fa-eye" aria-hidden="true"></i> Follow</span>
                            }
                        }
                    </div>
                }
            </div>
        </div>
    </div>
</div>