<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>@<%=user.username%>'s Dashboard - 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="/views/dashboard/styles.min.css">
</head>

<body style="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>
    <div class="row">          
        <img class="img-fluid"
            style="background: url('https://cdn.bootstrapstudio.io/placeholders/1400x800.png'); display: inline-block;
            width: 150px;
            height: 150px;object-fit: cover; border-radius: 50%;border:solid 3px rgb(255, 89, 0) ;"
            src="<%=profilephoto%>" width="200" height="200" alt="profile picture" id="pfp" />
        <div class="col"><h1 id="username" style="margin-left:20px;"><%=user.name%></h1>
 <button class="btn btn-primary" type="button" style="margin-left:20px;">Followers:
                
                <%=user.followers.length%></button>
                
                <button class="btn btn-primary" type="button"
                style="margin-left:30px;">Following:
                <%=user.following.length%></button>
        </div>
    </div>
    <hr class="d-lg-flex" style="font-size: 10%;border-top: 2px solid  #b9b4b4;">
    <div>
        <div class="container">
            <%let i=0%>
            <%post.reverse();%>
            <%post.forEach(ele=>{%>
            <div class="row">
                <%if(i==0){%>
                <div class="col-md-4" style="max-width: 20%;background: #03274b;text-align: center; height:100%;padding:10px" >
                    <p style="padding: 4px;text-align: center;color:#ffffff;font-weight: bolder;">@<%=user.username%></p>
                    <hr style="border-top: 1px solid white;">
                    <p style="color:#ffffff">Followers: <%=user.followers.length%></p>
                    <p style="color:#ffffff">Following: <%=user.following.length%></p>
                    <hr style="border-top: 1px solid white;"><button class="follow-users" type="button"
                        style="text-align: center;padding: 5px;  background-color: rgb(255, 89, 0);;"><a href="/users"
                            style="text-decoration: none; color:#ffffff">Follow Users</a></button>
                </div>
                <%} else{%>
                <div class="col-md-4" style="max-width: 20%;padding: 11px;text-align: center;">
                    <div></div>
                    <p style="padding: 4px;text-align: center;"></p>
                    <p></p>
                    <p></p>
                </div>
                <%}%>
                    <div class="col-md-4" style="max-width: 64%;width: 60%;min-width: 60%;text-align: center;background: #b8b1b1;margin: 0px;margin-left: 3%;margin-right: 3%" id="div<%=ele._id%>">
                    <div class="row" style="background:  #03274b;">
                    <div class="col-md-4" style="max-width: 20%;text-align: right;margin-top: 16px;margin-bottom: -17px;margin-left: -45px;"><img src="<%=profilephoto%>"
                style="width: 42%; height: 61%;">  </div>
            <div class="col" style="text-align: left;margin-top: 9px;margin-bottom: -7px;">
                <p style="text-align: left;font-size: 17px;font-weight: bolder;color:#ffffff">@<%=user.username%></p>
                  <p
                    style="margin-bottom: 33px;margin-top: -16px;font-size: 13px;text-align: left;color: rgb(101,119,136);">
                    &nbsp;<%=ele.timestamp.toLocaleString("en-GB", {timeZone: "Asia/Kolkata",month: "long",day:"2-digit",year:"numeric","hour":"2-digit","minute":"2-digit","second":"2-digit",hour12: true})%></p> 
            </div>
        </div>
        <p style="text-align: left;"><br><%=ele.post%>&nbsp;<br></p><%i++%>
        <hr style="border-top: 2px solid white;">
        <%if(ele.photo!=null){%>
        <img class="img-fluid" src="<%=ele.photo%>"
            style="width: auto;height: auto;text-align: center;margin-top: 7px; margin-bottom: 10px;">
        <%}%>
        <%if(ele.id==user._id) {%>
            <div style="margin-left:85%; margin-bottom:1%; text-align: left; display: inline; float:left;"
            id="d<%=ele._id%>">Delete PostüóëÔ∏è</div>
            <script>
                document.getElementById('d<%=ele._id%>').onclick = function () {
                            $.post('/deletepost/<%=ele._id%>', function (data, status) {})
                            document.getElementById('div<%=ele._id%>').remove()
                            }
            </script>
        <%}%>
                </div>
            </div>
            <br><br>    
          <%})%>
    </div>
    </div>
    <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>