<!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 Profile - C-OOP-EREATION</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/profile/assets/css/styles.min.css">
</head>

<body style="background: rgb(234,226,226);">
    <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="text-center profile-card" style="margin-top:10%;background: rgb(234,226,226);">
        
        <div><img class="rounded-circle" style="margin-top:-70px;" src="<%=profilepic.profilephoto%>" height="150px">
            <h3><%=user.name%></h3>
            <p style="padding:20px;padding-bottom:0;padding-top:5px;"><i>"<%=user.bio%></i>"</p>
        </div>
        <div class="row" style="padding:0;padding-bottom:10px;padding-top:20px;">
            <div class="col-md-6">
                <p class="text-nowrap text-right">Followers</p>
                <p class="text-right"><strong><%=user.followers.length%></strong></p>
            </div>
            <div class="col-md-6">
                <p class="text-left">Following</p>
                <p class="text-left"><strong><%=user.following.length%></strong></p>
            </div>
        </div>
    </div>
    <%post.reverse()%>
<center>
    <%post.forEach(ele=>{%>
    <div class="col-md-4" style="max-width: 64%;width: 60%;min-width: 60%;text-align: center;background: #ffffff;margin: 5%">
        <div class="row" style="background: #d7c5c5;">
            <div class="col-md-4" style="max-width: 20%;text-align: right;margin-top: 16px;margin-bottom: -17px;margin-left: -45px;"><img src="<%=profilepic.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;">@<%=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>
        <hr>
        <%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;">
        <%}%>
    </div>
    <%})%>
</center>
    <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>