{% extends 'admin/base_site.html' %}
{% block title %}{{ cat.title }}{% endblock %}
{% block page_title %}Category Detail{% endblock %}
{% block nav_categories %}active{% endblock %}

{% block topbar_actions %}
<a href="{% url 'admin_categories:category_list' %}" class="btn btn-outline btn-sm">&larr; All Categories</a>
{% if not cat.deleted_at %}<a href="{% url 'admin_categories:category_edit' cat.id %}" class="btn btn-gradient btn-sm">Edit</a>{% endif %}
{% endblock %}

{% block content %}
<div class="grid-2">
  <div>
    <div class="card mb-3">
      <div class="card-body">
        <div class="flex items-center gap-2 mb-2">
          <span class="cat-color-dot cat-color-dot--xl"></span>
          <h2 class="font-head detail-title">{{ cat.title }}</h2>
          {% if cat.deleted_at %}<span class="chip chip-deleted">Deleted</span>{% else %}<span class="chip chip-active">Active</span>{% endif %}
        </div>
        <p class="text-muted text-sm mb-3">{{ cat.description|default:"No description." }}</p>
        <div class="detail-meta-grid mt-2">
          <div><span class="text-muted">Slug:</span> <code>{{ cat.slug }}</code></div>
          <div><span class="text-muted">Parent:</span> {{ cat.parent.title|default:"Root" }}</div>
          <div><span class="text-muted">Children:</span> {{ children|length }}</div>
        </div>
        <div class="divider"></div>
        <div class="detail-audit">
          <div><span class="text-muted">Created by:</span> {{ cat.created_by.username|default:"-" }} - {{ cat.created_at|date:"M d, Y" }}</div>
          <div><span class="text-muted">Updated by:</span> {{ cat.updated_by.username|default:"-" }} - {{ cat.updated_at|date:"M d, Y" }}</div>
          {% if cat.deleted_at %}<div><span class="text-muted">Deleted by:</span> {{ cat.deleted_by.username|default:"-" }} - {{ cat.deleted_at|date:"M d, Y" }}</div>{% endif %}
        </div>
      </div>
    </div>
    {% if children %}
    <div class="card">
      <div class="card-body">
        <p class="panel-section-title mb-2">Sub-categories ({{ children|length }})</p>
        {% for child in children %}
        <div class="sub-cat-item">
          <div class="flex items-center gap-2">
            <span class="cat-color-dot cat-color-dot--sm" style="background:{{ child.color }}"></span>
            <a href="{% url 'admin_categories:category_detail' child.id %}" class="link-accent text-sm font-bold">{{ child.title }}</a>
          </div>
          {% if child.deleted_at %}<span class="chip chip-deleted">Deleted</span>{% else %}<span class="chip chip-active">Active</span>{% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
  <div>
    <div class="card">
      <div class="card-body">
        <p class="panel-section-title mb-2">Events in this category ({{ events|length }})</p>
        {% if events %}
        <div class="table-wrap">
          <table>
            <thead><tr><th>Title</th><th>Status</th><th>Date</th></tr></thead>
            <tbody>
              {% for event in events %}
              <tr>
                <td><a href="{% url 'admin_events:event_detail' event.id %}" class="link-accent text-sm font-bold">{{ event.title|truncatechars:26 }}</a></td>
                <td><span class="chip chip-{{ event.status }}">{{ event.status|title }}</span></td>
                <td class="text-muted text-sm">{{ event.start_date|date:"M d, Y" }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}<p class="text-muted text-sm">No events in this category.</p>{% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}