<%- include('../partials/header', { title }) %>

<div class="admin-page-head">
  <div>
    <h2>Careers</h2>
    <p style="color: var(--ink-300);"><%= jobs.length %> postings</p>
  </div>
  <a href="/admin/jobs/new" class="btn btn-primary btn-sm"><i data-lucide="plus" width="16" height="16"></i> Add Job</a>
</div>

<div class="table-wrap">
  <table class="data-table">
    <thead><tr><th>Title</th><th>Department</th><th>Location</th><th>Type</th><th>Status</th><th></th></tr></thead>
    <tbody>
      <% if (!jobs.length) { %>
        <tr><td class="empty-row" colspan="6">No job postings yet. <a href="/admin/jobs/new">Add your first one</a>.</td></tr>
      <% } %>
      <% jobs.forEach(function(j) { %>
        <tr>
          <td class="cell-title"><%= j.title %></td>
          <td class="cell-muted"><%= j.department %></td>
          <td class="cell-muted"><%= j.location %></td>
          <td class="cell-muted"><%= j.employment_type %></td>
          <td><span class="badge <%= j.status === 'open' ? 'badge-accent' : '' %>"><%= j.status %></span></td>
          <td class="actions">
            <a class="icon-btn" href="/careers/<%= j.slug %>" target="_blank" title="View"><i data-lucide="external-link" width="15" height="15"></i></a>
            <a class="icon-btn" href="/admin/jobs/<%= j.id %>/edit" title="Edit"><i data-lucide="pencil" width="15" height="15"></i></a>
            <form action="/admin/jobs/<%= j.id %>/delete" method="POST" style="display:inline;" data-confirm="Delete this posting?">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
              <button class="icon-btn is-danger" type="submit" title="Delete"><i data-lucide="trash-2" width="15" height="15"></i></button>
            </form>
          </td>
        </tr>
      <% }); %>
    </tbody>
  </table>
</div>

<%- include('../partials/footer') %>
