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

{% block title %}Manage Products{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Products</h1>
    <a href="{{ url_for('admin_add_product') }}" class="btn btn-orange">
        <i class="fas fa-plus me-2"></i>Add Product
    </a>
</div>

<div class="card shadow">
    <div class="card-body">
        {% if products %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Stock</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                    <tr>
                        <td>
                            <div class="product-image bg-light d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                {% if product.image_url %}
                                    <img src="{{ product.image_url }}" alt="{{ product.name }}" class="img-fluid" style="max-height: 100%; max-width: 100%; object-fit: cover;">
                                {% else %}
                                    <i class="fas fa-image text-muted"></i>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            <strong>{{ product.name }}</strong>
                            {% if product.is_featured %}
                                <span class="badge bg-orange">Featured</span>
                            {% endif %}
                            {% if product.is_clearance %}
                                <span class="badge bg-danger">Clearance</span>
                            {% endif %}
                        </td>
                        <td>{{ product.category_ref.name }}</td>
                        <td>KES {{ "%.2f"|format(product.price) }}</td>
                        <td>{{ product.stock_quantity }}</td>
                        <td>
                            {% if product.stock_quantity > 0 %}
                                <span class="badge bg-success">In Stock</span>
                            {% else %}
                                <span class="badge bg-danger">Out of Stock</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ url_for('admin_edit_product', product_id=product.id) }}" class="btn btn-sm btn-outline-primary me-1">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{{ url_for('admin_delete_product', product_id=product.id) }}" 
                               class="btn btn-sm btn-outline-danger"
                               onclick="return confirm('Are you sure you want to delete this product?')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="text-center py-4">
            <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No products available</h5>
            <p class="text-muted">Start by adding your first product.</p>
            <a href="{{ url_for('admin_add_product') }}" class="btn btn-orange">Add Product</a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}