{% extends "layout.html" %}

{% block content %}
  <h1 class="title">Hello, {{ current_user.username }}!</h1>
  <h2 class="subtitle">Recent Posts:</h2>
  <button type="button" title="New Post" class="newpost-button" data-toggle="modal" data-target="#createPostModal">
    <i class="fa-solid fa-plus"></i>
  </button>
  <!-- Modals -->
  <div class="modal fade dark-modal" id="createPostModal" tabindex="-1" role="dialog" aria-labelledby="createPostModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="createPostModalLabel">Create New Post</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form method="POST" action="{{ url_for('create_post') }}" enctype="multipart/form-data">
            <div class="form-group">
              <label for="postCaption">Caption</label>
              <textarea id="postCaption" name="content" class="form-control" required></textarea>
            </div>
            <div class="form-group">
              <label for="postImage">Image</label>
              <input type="file" id="postImage" name="image" class="form-control-file">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary">Create Post</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  {% for post in posts %}
  <div class="post">
    <div class="top">
    <a class="post_profile_a" href="user/{{post.author.id}}"><img class="post_profile_picture" src="{{ url_for('static', filename='users/uploaded_images/' + post.author.profile_pic) }}" alt="Profile Image"><p class="profile_name">{{ post.author.username }}</p></a>
    <div class="dropdown">
      <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton{{ post.id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-ellipsis-vertical"></i>
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ post.id }}">
        <a class="dropdown-item" href="/" onclick="deletePost({{ post.id }})">Delete Post</a>
      </div>
    </div>
  </div>
  <p class="caption">{{ post.content }}</p>
    {% if post.filename %}
      <img class="post-image" src="{{ url_for('static', filename='users/uploaded_images/' + post.filename) }}" alt="Post Image">
    {% endif %}
  
    
  
    <div class="post-interactions">
      <p class="post-likes">
        <i class="fas fa-heart {% if not current_user.has_liked_post(post) %}heartIcon{% endif %}{% if current_user.has_liked_post(post) %}liked{% endif %}" onclick="likePost({{ post.id }})" id="heartIcon{{ post.id }}"></i>
        <span class="likes" id="likeCount{{ post.id }}">{{ post.likes_count }}</span>
      </p>
      <p class="post-comments" onclick="showComments({{ post.id }})">
        <i class="fas fa-comment CommentIcon"></i> {{ post.comments | length }}
      </p>
      <p class="post-info">Posted by {{ post.author.username }} on {{ post.created_at.strftime('%Y-%m-%d') }}</p>
    </div>
    <div class="modal fade dark-modal" id="commentsModal{{ post.id }}" tabindex="-1" role="dialog" aria-labelledby="commentsModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="commentsModalLabel">Comments</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <ul class="list-group">
              {% for comment in post.comments %}
                <li class="list-group-item">
                  <strong>{{ comment.author.username }}:</strong> {{ comment.content }}
                </li>
              {% endfor %}
            </ul>
          </div>
          <div class="modal-footer">
            <form method="POST" action="{{ url_for('add_comment', post_id=post.id) }}">
              <div class="form-group">
                <textarea name="content" class="form-control" placeholder="Write your comment here" required></textarea>
              </div>
              <button type="submit" class="btn btn-primary">Submit Comment</button>
            </form>
          </div>
        </div>
      </div>
    </div>
      </div>

  {% endfor %}
  <script src="{{ url_for('static', filename='js/editPost.js') }}"></script>
  <script src="{{ url_for('static', filename='js/deletePost.js') }}"></script>
  <script src="{{ url_for('static', filename='js/likePost.js') }}"></script>
  <script src="{{ url_for('static', filename='js/showComments.js') }}"></script>
  <script src="{{ url_for('static', filename='js/dropdown.js') }}"></script>
{% endblock %}