{% extends "dashboard/base.html" %}
{% load humanize %}

{% block page_title %}Products{% endblock %}
{% block header_actions %}<a href="{% url 'dashboard:product_create' %}" class="btn btn--primary btn--sm">Add Product</a>{% endblock %}

{% block dashboard_content %}
{% if products %}
<div class="grid grid--3">
    {% for product in products %}
    <div class="card product-card animate-in">
        <div class="product-card__image-wrapper">
            {% if product.primary_image %}
            <img src="{{ product.primary_image.image.url }}" alt="{{ product.name }}" class="product-card__image" loading="lazy">
            {% else %}
            <div style="width:100%;height:180px;background:var(--color-border-light);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);">No image</div>
            {% endif %}
            {% if not product.is_active %}<span class="product-card__badge badge badge--ended">Inactive</span>{% endif %}
        </div>
        <div class="product-card__body">
            <h3 class="product-card__name">{{ product.name }}</h3>
            <p class="product-card__price">GHS {{ product.base_price|floatformat:2 }}</p>
            <p class="text-xs text-muted mt-2">{{ product.images.count }} image{{ product.images.count|pluralize }}</p>
        </div>
        <div class="product-card__actions flex gap-2">
            <a href="{% url 'dashboard:product_edit' product.id %}" class="btn btn--secondary btn--sm" style="flex:1;">Edit</a>
            <form method="post" action="{% url 'dashboard:product_delete' product.id %}" style="flex:0;" onsubmit="return confirm('Deactivate this product?');">
                {% csrf_token %}
                <button type="submit" class="btn btn--ghost btn--sm" style="color:var(--color-error);">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
                </button>
            </form>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <h3 class="empty-state__title">No products yet</h3>
    <p class="empty-state__desc">Add your first product to start building your catalog.</p>
    <a href="{% url 'dashboard:product_create' %}" class="btn btn--primary">Add Product</a>
</div>
{% endif %}
{% endblock %}