<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Timeline - 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/posts/styles.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body style="background:rgba(255, 255, 255, 0.967);">

    <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>
    


    <br>

    <%let j=0,k=0%>
                    <%let i=0%>
                    <%post.reverse();profilepic.reverse();by.reverse()%>
                    <%if(post.length<1) {%>
                    <center>
                        <p><strong>Start following other users to fill up your timeline with interesting
                                content!</strong></p>
                    </center>
                    <%}%>
    <%post.forEach(ele=>{%>
                    <div>
                        <div class="container">
                            <div class="row">
                                <%if(k==0){%>
                                <div class="col-md-4"
                                    style="background: #03274b;padding: 11px;text-align: center;width: 100%;height: 100%;max-width: 20%;">
                                    <div></div>
                                    <p style="padding: 4px;text-align: center;font-weight: bolder;color:#ffffff" ;>
                                        @<%=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="btn btn-primary" style="background-color: rgb(255, 89, 0)"
                                        type="button" style="text-align: center;padding: 5px;">Follow Users</button>
                                </div>
                                <%k++%>
                                <%}else{%>
                                <div class="col-md-4"
                                    style="padding: 11px;text-align: center;width: 100%;height: 100%;max-width: 20%;">
                                    <div></div>
                                    <p style="padding: 4px;text-align: center;"></p>
                                    <hr>
                                    <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%; margin-bottom: 10%;" 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="<%=profilepic[i].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 ;color: rgb(255, 255, 255)">
                                    <%=by[i].name%><%i++%></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;"><%=ele.post%>&nbsp;<br></p>
                        <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;"><br>
                        <%}%>
                    <div style="margin-left:1%; margin-bottom:1%; text-align: left; display:inline; float:left;cursor:pointer;" id="<%=ele._id%>">üëç<%=ele.likes.length%>
                    </div>
                    <div style="margin-left:1%; margin-bottom:1%; text-align: left; display: inline; float:left;"
                        id="c<%=ele._id%>"><a href="/comments/<%=ele._id%>">üí¨<%=ele.comments.length%></a></div>
                    <%if(ele.id==user._id) {%>
                        <div style="margin-left:75%; margin-bottom:1%; text-align: left; display: inline; float:left;"
                        id="d<%=ele._id%>">Delete PostüóëÔ∏è</div>
                    <%}%>
                    <script>
                        document.getElementById('<%=ele._id%>').onclick = function () {
                            $.post('/likepost/<%=ele._id%>', function (data, status) {})
                            document.getElementById('<%=ele._id%>').innerText = "üëç<%=ele.likes.length+1%>"
                            document.getElementById('<%=ele._id%>').onclick = () => {
                                $.post('/removelike/<%=ele._id%>', function (data, status) {})
                                document.getElementById('<%=ele._id%>').innerText = "üëç<%=ele.likes.length%>"
                            }
                        }
                        document.getElementById('d<%=ele._id%>').onclick = function () {
                            $.post('/deletepost/<%=ele._id%>', function (data, status) {})
                            document.getElementById('div<%=ele._id%>').remove()
                            }
                        
                    </script>
            </div>
            <br><br>

            <br><br>


        </div>
        </div>

        </div>
        <%})%>
        <center>
            <form action="/post" method="POST" enctype="multipart/form-data">

                <br><br><br>
                <div style="font-family: lucida console; font-size: 1.5vw; font-weight: bolder;">Create Post</div>
                <br><br>
                Post:<br><textarea name="post" rows="10" cols="70"></textarea><br><br>
                <label for="tag">Tag:</label>
                <select name="tag" id="tag">
                    <option value="General">General</option>
                    <option value="Complaint">Complaint</option>
                </select>
                <br><br>
                Upload Image: &nbsp&nbsp<input type="file" name="postphoto" id="inp"><br><br>
                <input type='submit' value="Post">
            </form>
        </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>