@{
    ViewData["Title"] = "Recommended Users";
}

@model RecommendedUsersPaginationViewModel

<div class="row">
    @foreach (var user in Model.AllUsers)
    {
        <div class="col-md-4">
            <div class="uicard">
                <div class="fon">
                    <img src=@user.CoverImageUrl>
                </div>

                <div class="user">
                    <img src=@user.ImageUrl>
                    <div class='status-circle' id="@(user.UserName)allUsersStatus">
                        <input type="hidden" value="@user.UserName" />
                        @*Here go the dot status*@
                    </div>
                    <p>@user.FirstName @user.LastName</p>
                    <p><a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@user.UserName" class="allUsersUsername">@@@user.UserName</a></p>
                    @if (User.Identity.Name == user.UserName)
                    {
                        <div class="col-xs-6">
                            <a asp-area="Identity" asp-page="/Account/Manage/Index" class="btn btn-info btn-block">
                                <i class="fas fa-edit"></i> Edit Profile
                            </a>
                        </div>
                        <div class="col-xs-6">
                            <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@user.UserName" type="button" class="btn btn-warning btn-block">
                                <i class="fas fa-check-circle"></i> <span>It's You</span>
                            </a>
                        </div>
                    }
                    else
                    {
                        <div class="col-xs-6">
                            @if (user.HasFollowed == true)
                            {
                                <form asp-area="" asp-controller="Profile" asp-action="Unfollow" asp-route-username="@user.UserName" method="post">
                                    <button type="submit" class="btn btn-danger btn-block">
                                        <i class="fas fa-minus-circle"></i> Unfollow
                                    </button>
                                </form>
                            }
                            else
                            {
                                <form asp-area="" asp-controller="Profile" asp-action="Follow" asp-route-username="@user.UserName" method="post">
                                    <button type="submit" class="btn btn-success btn-block">
                                        <i class="fas fa-plus-circle"></i> Follow
                                    </button>
                                </form>
                            }
                        </div>
                        <div class="col-xs-6">
                            <a asp-area="" asp-controller="Profile" asp-action="Index" asp-route-username="@user.UserName" type="button" class="btn btn-info btn-block">
                                <i class="fas fa-user"></i> <span>View Profile</span>
                            </a>
                        </div>
                    }
                </div>
                <div class="socialinfo">
                    <div class="socialtext1">
                        <p>@user.FollowersCount</p>
                        <p>Followers</p>
                    </div>

                    <div class="socialtext2">
                        <p>@user.FollowingsCount</p>
                        <p>Following</p>
                    </div>

                    <div class="socialtext3">
                        <p>@user.Activities</p>
                        <p>Activities</p>
                    </div>
                </div>
            </div>
        </div>
    }
</div>
<div class="container">
    <div class="row" style="text-align: center">
        @Html.PagedListPager((IPagedList)Model.AllUsers,
                page => Url.Action("Users", "Profile",
                new { page = page }),
                PagedListRenderOptions.OnlyShowFivePagesAtATime)
    </div>
    <br />
</div>