{% extends 'dashboard/base.html' %}
{% block title %}Blog Categories{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>Blog Categories</h1>
    <p class="sp-muted">Organise your blog posts into categories. <a href="{% url 'dashboard_blog_list' %}">← All posts</a></p>
  </div>
</div>

<div class="sp-card">
  <h2>Categories</h2>
  <table class="sp-table">
    <thead><tr><th>Name</th><th>Slug</th><th>Posts</th><th></th></tr></thead>
    <tbody>
      {% for category in categories %}
      <tr>
        <td><strong>{{ category.name }}</strong></td>
        <td class="sp-muted">{{ category.slug }}</td>
        <td class="sp-muted">{{ category.posts.count }}</td>
        <td>
          <details style="display:inline-block;">
            <summary class="sp-btn sp-btn-sm" style="display:inline-block;">Edit</summary>
            <form method="post" action="{% url 'dashboard_blog_category_edit' category.id %}" style="margin-top:10px;min-width:220px;">
              {% csrf_token %}
              <label class="sp-label">Name</label>
              <input class="sp-input" type="text" name="name" value="{{ category.name }}">
              <label class="sp-label">Slug</label>
              <input class="sp-input" type="text" name="slug" value="{{ category.slug }}">
              <button class="sp-btn sp-btn-primary sp-btn-sm" type="submit">Save</button>
            </form>
          </details>
          <form method="post" action="{% url 'dashboard_blog_category_delete' category.id %}" style="display:inline;" data-sp-confirm="Posts in this category will become uncategorised, not deleted." data-sp-confirm-title="Delete this category?">
            {% csrf_token %}
            <button class="sp-btn sp-btn-sm sp-btn-danger" type="submit">Delete</button>
          </form>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="4" class="sp-empty">No blog categories yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="sp-card" style="max-width:420px;">
  <h2>+ Add Category</h2>
  <form method="post">
    {% csrf_token %}
    <label class="sp-label">Name</label>{{ form.name }}
    <label class="sp-label">Slug</label>{{ form.slug }}
    <button class="sp-btn sp-btn-primary" type="submit">Create Category</button>
  </form>
</div>
{% endblock %}