<%- include('header.ejs') %>
<div style="width: 400px; float: left; margin: 0 50px;">
    
<form action="/tweet_submit" method="post" enctype="multipart/form-data">
    <h2>What's Happening here?? </h2>
    <textarea name="post" style="width: 300px; height: 100px;" ></textarea>
    <br />
    <input type="file" name="tweet_img" />
    <input type="submit" value="Tweet">
</form>
<!-- all the tweets will be generated below -->
<h2>Tweets</h2>
<div class="tweet">
    <% for (var i=0;i<result.length;i++) { %>
        <div class="tweet_wrap">
            <div class="user-profile">
                <img src="<%= result[i].profilepic %>">
            </div>
            <div class="t_un"><%=result[i].username%></div>
            <div class="t_time">
                <% 
                    var d = new Date(result[i].datetime);
                    var td = d.getFullYear()+'-'+d.getMonth()+'-'+d.getDate();
                    %>
                <%= td %>
            </div>
            <br>
            <div class="tweet_post">
                <%= result[i].post %><br/>
                <% if(result[i].type=="image/jpg"||result[i].type=="image/jpeg"||result[i].type=="image/png"||result[i].type=="image/gif"|| result[i].type=="image/") { %>
                    <!-- Display the image -->
                    <img src="/uploads/<%=result[i].img_vdo_name %>" width="300" height="300" alt="Post Image"/>
                <% } else { %>   
                    <video width="200" height="200" controls autoplay>
                        <source src="/uploads/<%=result[i].img_vdo_name %>">
                    </video>    
                <% } %>
            </div>
            <div class="like_comment">
                <button class="like-btn">Like</button>
                <button class="comment-btn">Comment</button>
            </div>
            <div class="comments-section">
                <!-- Comments will appear here -->
            </div>
        </div>
    <% } %>
</div>

</div>
<%- include('trending_tags.ejs') %>
    
