<div class="form-page">
  <a href="/member/bulletin" class="back-link"><i class="bi bi-arrow-left"></i> Back to Bulletin</a>
  <div class="form-card">
    <h2>Create a Post</h2>
    <% if (typeof error !== 'undefined' && error && error.length) { %><div class="alert alert-error"><%= error[0] %></div><% } %>
    <form action="/member/bulletin" method="POST" enctype="multipart/form-data">
      <div class="form-group"><label>Category *</label>
        <div class="category-select-grid">
          <% [['announcement','megaphone','Announcement'],['opportunity','lightbulb','Opportunity'],['partnership','people','Partnership'],['vendor','bag-check','Vendor Request'],['job','briefcase','Job Listing'],['promotion','tags','Promotion']].forEach(([val, icon, label]) => { %>
          <label class="cat-select-item"><input type="radio" name="category" value="<%= val %>" required><div class="csi-inner"><i class="bi bi-<%= icon %>-fill"></i><span><%= label %></span></div></label>
          <% }) %>
        </div>
      </div>
      <div class="form-group"><label>Title *</label><input type="text" name="title" required placeholder="Enter a descriptive title..." maxlength="255"></div>
      <div class="form-group"><label>Content *</label><textarea name="content" rows="8" required placeholder="Share the details of your post..." maxlength="5000"></textarea><small class="form-help">Maximum 5000 characters.</small></div>
      <div class="form-group"><label>Attachment (optional)</label><input type="file" name="attachment" accept="image/*,.pdf"><small class="form-help">Images or PDF only, max 10MB.</small></div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="bi bi-send-fill"></i> Publish Post</button>
        <a href="/member/bulletin" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>
</div>
