{% extends "base.html" %}

{% block title %}Kategorien{% endblock %}
{% block heading %}Kategorien{% endblock %}
{% block topbar_actions %}
  <a class="btn btn-primary" href="/categories/new">+ Neue Kategorie</a>
{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header">
    <div>
      <h2>{{ categories|length }} Kategorien</h2>
      <p class="sub">Klassifikation für Artikel — Werkzeug-Eigenschaften, Material-Typen, Bestand-Status</p>
    </div>
  </div>
  {% if categories %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Dimension</th>
        <th>Wert</th>
        <th class="num">Verknüpfte Artikel</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for c in categories %}
      <tr>
        <td class="text-neutral-600 text-xs uppercase tracking-wider font-semibold">{{ c.dimension }}</td>
        <td><span class="badge badge-neutral">{{ c.name }}</span></td>
        <td class="num">{{ c.item_count or 0 }}</td>
        <td class="text-right"><a class="btn btn-sm btn-secondary" href="/categories/{{ c.id }}/edit">Bearbeiten</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center text-sm text-neutral-500">Keine Kategorien.</div>
  {% endif %}
</div>
{% endblock %}