<div class="page-actions">
  <a href="/member/bulletin/new" class="btn btn-primary"><i class="bi bi-plus-circle-fill"></i> New Post</a>
</div>

<!-- Category Filters -->
<div class="category-pills">
  <a href="/member/bulletin" class="pill <%= !category ? 'active' : '' %>">All</a>
  <% ['announcement','opportunity','partnership','vendor','job','promotion'].forEach(cat => { %>
  <a href="/member/bulletin?category=<%= cat %>" class="pill <%= category === cat ? 'active' : '' %> pill-<%= cat %>"><%= cat.charAt(0).toUpperCase() + cat.slice(1) %></a>
  <% }) %>
</div>

<!-- Search -->
<form class="search-bar-simple" method="GET" action="/member/bulletin">
  <input type="hidden" name="category" value="<%= category %>">
  <div class="search-input-wrap"><i class="bi bi-search"></i><input type="text" name="search" value="<%= search %>" placeholder="Search posts..."></div>
  <button type="submit" class="btn btn-outline-primary btn-sm">Search</button>
</form>

<% if (posts && posts.length) { %>
<div class="bulletin-feed">
  <% posts.forEach(post => { %>
  <div class="bulletin-post">
    <div class="bp-header">
      <div class="bp-org-info">
        <% if (post.org_logo) { %><img src="<%= post.org_logo %>" alt="<%= post.org_name %>" class="bp-org-logo"><% } else { %><div class="bp-org-avatar"><%= post.org_name[0] %></div><% } %>
        <div><a href="/member/directory/<%= post.org_slug %>" class="bp-org-name"><%= post.org_name %></a><span class="bp-time"><%= moment(post.created_at).fromNow() %></span></div>
      </div>
      <span class="bp-category pill-<%= post.category %>"><%= post.category %></span>
    </div>
    <a href="/member/bulletin/<%= post.id %>" class="bp-body">
      <% if (post.is_pinned) { %><i class="bi bi-pin-fill bp-pin" title="Pinned"></i><% } %>
      <h3><%= post.title %></h3>
      <p><%= post.content.substring(0,200) %><%= post.content.length > 200 ? '...' : '' %></p>
    </a>
    <div class="bp-footer">
      <span class="bp-stat"><i class="bi bi-heart"></i> <%= post.likes_count %></span>
      <span class="bp-stat"><i class="bi bi-chat"></i> <%= post.comments_count %></span>
      <span class="bp-stat"><i class="bi bi-eye"></i> <%= post.views %></span>
      <a href="/member/bulletin/<%= post.id %>" class="btn btn-ghost btn-sm bp-reply-btn">Reply <i class="bi bi-arrow-right"></i></a>
    </div>
  </div>
  <% }) %>
</div>
<!-- Pagination -->
<% const totalPages = Math.ceil(total / limit); %>
<% if (totalPages > 1) { %>
<div class="pagination">
  <% if (page > 1) { %><a href="?page=<%= page-1 %>&category=<%= category %>" class="page-btn"><i class="bi bi-chevron-left"></i></a><% } %>
  <% for(let i=1; i<=totalPages; i++) { %><a href="?page=<%= i %>&category=<%= category %>" class="page-btn <%= i === page ? 'active' : '' %>"><%= i %></a><% } %>
  <% if (page < totalPages) { %><a href="?page=<%= page+1 %>&category=<%= category %>" class="page-btn"><i class="bi bi-chevron-right"></i></a><% } %>
</div>
<% } %>
<% } else { %>
<div class="empty-state"><i class="bi bi-pin-map"></i><h3>No posts yet</h3><p>Be the first to post something!</p><a href="/member/bulletin/new" class="btn btn-primary">Create Post</a></div>
<% } %>
