{% extends "admin_frontend/base.html" %}
{% load crispy_forms_tags %}
{% load mptt_tags %}

{% block title %}CMS Categories{% endblock %}

{% block content %}
  <div class="bg-white rounded shadow p-4 mb-6">
    <h1 class="text-xl font-semibold mb-4">Create Category</h1>
    <form method="post">
      {% csrf_token %}
      {{ form|crispy }}
      <div class="mt-3">
        <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Create</button>
      </div>
    </form>
  </div>

  <div class="bg-white rounded shadow p-4">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-lg font-semibold">Categories</h2>
      <form method="get" class="flex items-center gap-2">
        <input type="text" name="q" value="{{ query }}" placeholder="Search name..." class="border rounded px-3 py-2">
        <button class="px-3 py-2 border rounded">Search</button>
      </form>
    </div>
    <div>
      {% if categories %}
        <ul class="text-sm">
          {% recursetree categories %}
            <li class="py-1">
              <div class="flex items-center gap-3">
                <span class="inline-block border-l pl-3" style="margin-left: {{ node.level|add:'0' }}rem;">{{ node.name }}</span>
                <span class="text-gray-500">({{ node.slug }})</span>
                <a class="text-blue-600 hover:underline" href="{% url 'cms:category_edit' node.pk %}">Edit</a>
                <form method="post" action="{% url 'cms:category_delete' node.pk %}" class="inline" onsubmit="return confirm('Delete this category?')">
                  {% csrf_token %}
                  <button class="text-red-600 hover:underline">Delete</button>
                </form>
              </div>
              {% if not node.is_leaf_node %}
                <ul class="ml-4">
                  {{ children }}
                </ul>
              {% endif %}
            </li>
          {% endrecursetree %}
        </ul>
      {% else %}
        <div class="py-3 text-sm text-gray-600">No categories found.</div>
      {% endif %}
    </div>
  </div>
{% endblock %}
