{% extends "admin/layout.html" %}

{% block title %}Kategori | Admin Albab Store{% endblock %}
{% block topbar_title %}Kategori{% endblock %}

{% block content %}

<div class="admin-card">
    <div class="admin-card-head">
        <h2>Tambah Kategori</h2>
    </div>
    <form method="POST" action="{{ url_for('admin_category_add') }}" class="admin-form inline-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="form-group grow">
            <input type="text" name="name" placeholder="Nama kategori baru (contoh: Toko Online)" required>
        </div>
        <button type="submit" class="btn btn-primary">➕ Tambah</button>
    </form>
</div>

<div class="admin-card">
    <div class="admin-card-head">
        <h2>Semua Kategori ({{ categories|length }})</h2>
    </div>

    {% if categories %}
    <div class="table-wrap">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>Slug</th>
                    <th>Jumlah Produk</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                {% for category in categories %}
                <tr>
                    <td><strong>{{ category.name }}</strong></td>
                    <td><code>/{{ category.slug }}</code></td>
                    <td>{{ category.product_count }}</td>
                    <td class="table-actions">
                        <form method="POST" action="{{ url_for('admin_category_delete', category_id=category.id) }}"
                              class="js-confirm"
                              data-message="Hapus kategori '{{ category.name }}'?">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button class="btn btn-danger btn-sm" {% if category.product_count > 0 %}disabled title="Kategori masih berisi produk"{% endif %}>Hapus</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <p class="form-hint">Kategori yang masih berisi produk tidak bisa dihapus.</p>
    {% else %}
    <p class="empty-state">Belum ada kategori.</p>
    {% endif %}
</div>

{% endblock %}