<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="fw-bold">Manage Story</h4>
  <% if(career_data.length <= 0) {%>
            <a href="/career/addform" class="btn btn-primary">Add career</a>
    <% }%>
    <!-- <a href="/ourstory/addform" class="btn btn-primary">Add Story</a> -->
</div>

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Count</th>
      <th>Title</th>
      <th>Content</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <% if (career_data && career_data.length > 0) { %>
      <% career_data.forEach((story,i) => { %>
        <tr>
          <td>
            <%= i+1 %> 
          </td>
          <td><%= story.title %></td>
          <td><%= story.content.length > 50 ? story.content.substring(0, 50) + '...' : story.content %></td>
          <td>
            <a href="/career/editform/<%= story._id %>" class="btn btn-sm btn-warning">Edit</a>
               <form action="/career/delete/<%= story._id %>?_method=DELETE" 
                          method="POST" 
                          class="d-inline">
                      <button class="btn btn-sm btn-danger"
                              onclick="return confirm('Delete this project?')">
                        Delete
                      </button>
                    </form>
          </td>

        </tr>
      <% }) %>
    <% } else { %>
      <tr>
        <td colspan="4" class="text-center">No career_data found. Please add a story.</td>
      </tr>
    <% } %>
  </tbody>
</table>