<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Comments - 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/comments/assets/css/Community-ChatComments.css">
    <link rel="stylesheet" href="/views/comments/assets/css/Navigation-Clean.css">
    <link rel="stylesheet" href="/views/comments/assets/css/styles.css">
</head>
<body style="margin: -2px;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>    
    <hr>
    <%let i=0%>
    <center>
    <div>
        <div class="container">
            <div class="row">
                <div class="col-md-2" ></div>
                
                <div class="col-md-4" style="text-align: left;width: 100%;min-height: auto;
                margin-right:0px;min-width: 60%;background: #a7a6a6;">
                    <div>
                        <p><strong>@<%=author.username%></strong></p>
                        <p><%=post.post%></p>
                    </div>
                    <hr style="border-top: 1px solid white">
                    <%if(post.photo!=null){%>
                    <div style="text-align: center;"><img src="<%=post.photo%>" style="text-align: center;height:250px;width:250px"></div>
                    <%}%>
                    </div>
                <div class="col-md-4" style="max-width: 20%;"></div>
            </div>
        </div>
    </div>
</center>
    <div style="text-align: center;">
        <div class="card" style="text-align: left;margin: 20%;margin-top:5%;margin-bottom: 0%;background:#03274b">
            <div class="card-header" style="width: 100%;max-width: 100%;min-width: 100%;height: 62px;text-align: center;background: rgb(255, 89, 0)">
                <h3 style="color:white">Comments</h3>
            </div>
            <%post.comments.forEach(ele=>{%>
            <div class="card-body" style="height:120px;">
                <ul class="list-group">
                    <li class="list-group-item" style="margin-bottom:6px;">
                        <div class="media">
                            <div class="media-body">
                                <div class="media" style="overflow:visible;">
                                    <div class="media-body" style="overflow:visible;">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <p><a href="#"><%=user[i].name%>:</a> <%=ele.comment%><br>
<small class="text-muted"><%=new Date(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})%></small></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>  
                        </div>
                    </li>
                   
                </ul>
            </div>
            <%i++%>
            <%})%>
        </div>
    </div >
    <form method="POST" action="/postcomment/<%=post._id%>">    
    <div style="margin: 20%;margin-top:3% "; >
        <div class="card text-white bg-primary mb-1";>
  <div class="card-header" style="background:  #03274b">
      <input type="submit" value="Comment" class="float-right btn btn-dark"  style="background-color: rgb(255, 89, 0)"> <i class="fa fa-comment"  ></i> Comment</a>
  </div>

  <div class="card-body" style="background:  #03274b">
      <div class=" card-text form-group"  style="background-color: rgb(255, 89, 0)">
          <textarea placeholder="Comment" rows="4"
                    class="form-control form-control-lg" name="comment"></textarea>
      </div>
    
  </div>
</div>

</div>
</form>
    <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>