<div class="form-page">
  <a href="/member/social" class="back-link"><i class="bi bi-arrow-left"></i> Back to Social Media</a>
  <div class="form-card">
    <h2>Submit Content for Promotion</h2>
    <p style="color:#6b7280;font-size:.875rem;margin-bottom:20px">Submit your content for publication across Biz2Biz Chamber's social media channels. Our team will review and publish approved submissions.</p>
    <% if (typeof error !== 'undefined' && error && error.length) { %><div class="alert alert-error"><%= error[0] %></div><% } %>
    <form action="/member/social" method="POST" enctype="multipart/form-data">
      <div class="form-group"><label>Content Type *</label>
        <select name="submission_type" required>
          <option value="news">Company News</option>
          <option value="product">Product Launch</option>
          <option value="event">Event Promotion</option>
          <option value="announcement">Announcement</option>
          <option value="promotion">Special Promotion</option>
        </select>
      </div>
      <div class="form-group"><label>Title *</label><input type="text" name="title" required placeholder="Enter a headline..." maxlength="255"></div>
      <div class="form-group"><label>Content *</label><textarea name="content" rows="6" required placeholder="Write your post content... (recommended: 100-300 characters for best engagement)" maxlength="2000"></textarea></div>
      <div class="form-group"><label>Image (optional)</label><input type="file" name="image" accept="image/*"><small class="form-help">JPG, PNG up to 10MB. Square or landscape images work best.</small></div>
      <div class="form-group"><label>Link (optional)</label><input type="url" name="link" placeholder="https://..."></div>
      <div class="form-group"><label>Hashtags</label><input type="text" name="hashtags" placeholder="#business #networking #growth"></div>
      <div class="form-group"><label>Target Platforms</label>
        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:6px">
          <label style="display:flex;align-items:center;gap:6px;font-size:.875rem"><input type="checkbox" name="platforms" value="facebook" checked> Facebook</label>
          <label style="display:flex;align-items:center;gap:6px;font-size:.875rem"><input type="checkbox" name="platforms" value="instagram" checked> Instagram</label>
          <label style="display:flex;align-items:center;gap:6px;font-size:.875rem"><input type="checkbox" name="platforms" value="linkedin" checked> LinkedIn</label>
          <label style="display:flex;align-items:center;gap:6px;font-size:.875rem"><input type="checkbox" name="platforms" value="twitter"> Twitter/X</label>
        </div>
      </div>
      <div class="form-group"><label>Schedule For (optional)</label><input type="datetime-local" name="scheduled_at"><small class="form-help">Leave blank to let our team schedule at optimal time.</small></div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="bi bi-send-fill"></i> Submit for Review</button>
        <a href="/member/social" class="btn btn-ghost">Cancel</a>
      </div>
    </form>
  </div>
</div>
