<section>
  <div class="admin-header">
    <h1>Categories</h1>
  </div>
  <p class="hint">Blog categories and Work categories are kept separate, so each only shows up on the form it belongs to.</p>

  <h2>Blog categories</h2>
  <form method="POST" action="/admin/categories" style="max-width:360px; margin-bottom:1rem;">
    <input type="hidden" name="scope" value="blog">
    <label>
      New blog category
      <input type="text" name="name" placeholder="e.g. Company News" required>
    </label>
    <button type="submit">Add category</button>
  </form>
  <% if (!blogCategories.length) { %>
    <p>No blog categories yet.</p>
  <% } else { %>
    <table class="admin-table">
      <thead><tr><th>Name</th><th>Slug</th><th></th></tr></thead>
      <tbody>
        <% blogCategories.forEach(function(cat) { %>
          <tr>
            <td><%= cat.name %></td>
            <td><%= cat.slug %></td>
            <td>
              <form action="/admin/categories/<%= cat.id %>?_method=DELETE" method="POST" style="display:inline"
                    onsubmit="return confirm('Delete this category? It will be removed from any posts using it.')">
                <button type="submit">Delete</button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>

  <h2 style="margin-top:2.5rem;">Work categories</h2>
  <form method="POST" action="/admin/categories" style="max-width:360px; margin-bottom:1rem;">
    <input type="hidden" name="scope" value="work">
    <label>
      New work category
      <input type="text" name="name" placeholder="e.g. Event Management" required>
    </label>
    <button type="submit">Add category</button>
  </form>
  <% if (!workCategories.length) { %>
    <p>No work categories yet.</p>
  <% } else { %>
    <table class="admin-table">
      <thead><tr><th>Name</th><th>Slug</th><th></th></tr></thead>
      <tbody>
        <% workCategories.forEach(function(cat) { %>
          <tr>
            <td><%= cat.name %></td>
            <td><%= cat.slug %></td>
            <td>
              <form action="/admin/categories/<%= cat.id %>?_method=DELETE" method="POST" style="display:inline"
                    onsubmit="return confirm('Delete this category? It will be removed from any projects using it.')">
                <button type="submit">Delete</button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</section>
