<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trang chủ - SocialNet</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <%- include('partials/header') %>
  <div class="container">
    <div class="feed-container">
      <!-- Tạo bài viết -->
      <div class="create-post-box">
        <form action="/post/create" method="POST" enctype="multipart/form-data">
          <textarea name="content" placeholder="Bạn đang nghĩ gì?" required></textarea>
          <div class="post-form-options">
            <select name="privacy">
              <option value="public">🌍 Công khai</option>
              <option value="friends">👥 Bạn bè</option>
            </select>
            <label class="btn-image">
              📷 Thêm ảnh
              <input type="file" name="image" accept="image/*" style="display:none">
            </label>
            <button type="submit" class="btn-post">Đăng</button>
          </div>
        </form>
      </div>

      <!-- Danh sách bài viết -->
      <div class="posts">
        <% if (posts.length === 0) { %>
          <div class="empty-state">Chưa có bài viết nào. Hãy là người đầu tiên đăng!</div>
        <% } %>
        <% posts.forEach(post => { %>
          <div class="post-card">
            <div class="post-header">
              <img src="/uploads/<%= post.User.avatar %>" alt="avatar" class="avatar">
              <div class="post-user-info">
                <strong><%= post.User.fullname %></strong>
                <% if (post.User.verified) { %>
                  <span class="verified-badge">✅</span>
                <% } %>
                <span class="post-privacy"><%= post.privacy === 'public' ? '🌍' : '👥' %></span>
                <span class="post-time"><%= post.createdAt.toLocaleString() %></span>
              </div>
              <% if (user.id === post.userId || user.isAdmin) { %>
                <form action="/post/delete/<%= post.id %>" method="POST" style="margin-left:auto;">
                  <button type="submit" class="btn-delete" onclick="return confirm('Xóa bài viết này?')">🗑️</button>
                </form>
              <% } %>
            </div>
            <div class="post-content"><%= post.content %></div>
            <% if (post.image) { %>
              <div class="post-image">
                <img src="/uploads/<%= post.image %>" alt="post image">
              </div>
            <% } %>
            <div class="post-actions">
              <button class="like-btn" data-postid="<%= post.id %>">
                <span class="like-icon"><%= post.liked ? '❤️' : '🤍' %></span>
                <span class="like-count" id="like-count-<%= post.id %>"><%= post.likeCount %></span>
              </button>
              <span class="comment-count">💬 <%= post.commentCount %></span>
            </div>
            <!-- Comment form -->
            <div class="comment-section">
              <form action="/post/comment/<%= post.id %>" method="POST" class="comment-form">
                <input type="text" name="content" placeholder="Viết bình luận..." required>
                <button type="submit">Gửi</button>
              </form>
            </div>
          </div>
        <% }) %>
      </div>
    </div>
  </div>
  <%- include('partials/footer') %>
</body>
</html>