{% extends 'dashboard/base.html' %}
{% block title %}Categories{% endblock %}
{% block page_title %}Categories{% endblock %}

{% block content %}
<div class="page-header">
    <div><h1>Categories</h1><div class="breadcrumb">Dashboard / Categories</div></div>
    <a href="{% url 'dashboard:category_add' %}" class="btn btn-primary"><i class="fas fa-plus"></i> Add Category</a>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Slug</th>
                    <th style="text-align:center">Products</th>
                    <th style="text-align:center">Order</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for cat in categories %}
                <tr>
                    <td style="vertical-align: middle;">
                        <div style="display:flex;align-items:center;gap:12px">
                            {% if cat.image %}
                            <div class="product-thumb" style="width:40px;height:40px;border-radius:6px;overflow:hidden;flex-shrink:0;">
                                <img src="{{ cat.image.url }}" alt="{{ cat.name }}" style="width:100%;height:100%;object-fit:cover;display:block;">
                            </div>
                            {% else %}
                            <div style="width:40px;height:40px;border-radius:6px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;">
                                <i class="fas fa-tag" style="font-size:14px;"></i>
                            </div>
                            {% endif %}
                            <div>
                                <div class="fw-600" style="font-size:13px;line-height:1.4;">{{ cat.name }}</div>
                                {% if cat.description %}
                                <div style="font-size:11px;color:var(--muted);line-height:1.2;">{{ cat.description|truncatechars:40 }}</div>
                                {% endif %}
                            </div>
                        </div>
                    </td>
                    <td style="font-family:monospace;font-size:12px;color:var(--muted);vertical-align: middle;">{{ cat.slug }}</td>
                    <td style="text-align:center;font-weight:600;vertical-align: middle;">{{ cat.product_count }}</td>
                    <td style="text-align:center;vertical-align: middle;">{{ cat.order }}</td>
                    <td style="vertical-align: middle;"><span class="badge {% if cat.is_active %}badge-success{% else %}badge-danger{% endif %}">{% if cat.is_active %}Active{% else %}Hidden{% endif %}</span></td>
                    <td style="vertical-align: middle;">
                        <div style="display:flex;align-items:center;gap:6px">
                            <a href="{% url 'dashboard:category_edit' cat.pk %}" class="btn btn-outline btn-sm btn-icon" title="Edit"><i class="fas fa-edit"></i></a>
                            <form action="{% url 'dashboard:category_delete' cat.pk %}" method="POST" onsubmit="return confirm('Delete {{ cat.name }}?')" style="margin:0;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-danger btn-sm btn-icon" title="Delete"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="6" style="text-align:center;padding:60px;color:var(--muted)">
                        No categories yet. <a href="{% url 'dashboard:category_add' %}" style="color:var(--accent)">Add one</a>.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}