<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Users - C-OOP-ERATION</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="views/users/styles.min.css">
</head>

<body style="color: rgb(255, 255, 255);background: rgb(255, 255, 255);">
    <nav class="navbar navbar-light navbar-expand-md navigation-clean"  style="background: #03274b;">
        <div class="container" style="text-decoration: none; color:#ffffff"> <a class="navbar-brand" href="#">@<%=user.username%></a><button data-toggle="collapse"
                class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span>
                <span
                    class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav ml-auto" >
                    <li class="nav-item"><a class="nav-link" href="/announcements" style="text-decoration: none; color:#ffffff">Announcements</a></li>
                    <%if (user.isAdmin===true) {%>
                    <li class="nav-item"><a class="nav-link" href="/complaints" style="text-decoration: none; color:#ffffff">Complaints</a></li>
                    <%}%>
                    <%if (user.isSuperAdmin===true) {%>
                        <li class="nav-item"><a class="nav-link" href="/help" style="text-decoration: none; color:#ffffff">Help Requests</a></li>
                        <%}%>
                    <%if((user.isAdmin===false)&&(user.isSuperAdmin===false)){%>
                    <li class="nav-item"><a class="nav-link" href="/usercomplaints" style="text-decoration: none; color:#ffffff">Your Complaints</a></li>
                    <%}%>
                    <li class="nav-item"><a class="nav-link" href="/" style="text-decoration: none; color:#ffffff">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/post" style="text-decoration: none; color:#ffffff">Timeline</a></li>
                    <li class="nav-item"><a class="nav-link" href="/users" style="text-decoration: none; color:#ffffff">Follow Users</a></li>
                    <li class="nav-item"><a class="nav-link" href="/logout" style="text-decoration: none; color:#ffffff">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <%let i=0%>
    <%users.forEach(ele=>{%>
    <div class="row user-list" style="min-width: 100%;max-width: 100%;width: 100%;height: 100%;min-height: 100%;max-height: 100%;margin-left:15%;margin-top:2%;margin-bottom: 0%;">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 user-item">
        <div class="user-container"><a class="user-avatar" href="#"><img style="height:50px;width:50px;" src="<%=profilepic[i].profilephoto%>" width="48" height="48" alt="Profile Pic" /></a>
            <p class="user-name"><a href="#"><%=ele.name%></a><span>@<%=ele.username%></span></p></div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3 user-item">
       <button class="btn btn-link social-outline" 
       style=" background-color:  rgb(255, 89, 0); color:#ffffff;padding-right:8px;padding-left:8px;padding-top:4px;padding-bottom:3px;"
        type="button">
            <a href="/profile/<%=ele._id%> "  style="color:#ffffff"> View Profile</a></button>
       <%if(following[i]===false){%> 
       <button  class="btn btn-link social-outline" id="follow<%=ele._id%>" style=" background-color:  rgb(255, 89, 0);color:#ffffff;padding-right:8px;padding-left:8px;padding-top:4px;padding-bottom:3px;" type="button"><i class="icon-user-follow" style="color:#ffffff;"></i> Follow</button>
       <script>
        document.getElementById('follow<%=ele._id%>').onclick = () => {
            document.getElementById('follow<%=ele._id%>').innerText = "Following";
            $.post('/follow/<%=ele._id%>',function(data,err){
            })
            document.getElementById('follow<%=ele._id%>').onclick = ()=>{} 
        }
    </script>
    <%}else{%>
        <button class="btn btn-link social-outline" id="follow<%=ele._id%>" style=" background-color:  rgb(255, 89, 0);color:#ffffff;padding-right:8px;padding-left:8px;padding-top:4px;padding-bottom:3px;" type="button"><i class="icon-user-follow" style="color:#ffffff;"></i> Following</button>
     <%}%>
     <%i++%>
    </div>
</div>
<%})%>
<br>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>