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

{% block title %}Dashboard{% endblock %}

{% block content %}
<h1 style="margin: 30px 0 20px 0;">Dashboard</h1>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-value">{{ stats.total_products }}</div>
        <div class="stat-label"><i class="fas fa-box"></i> Total Products</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ stats.active_products }}</div>
        <div class="stat-label"><i class="fas fa-check-circle"></i> Active Products</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ stats.total_categories }}</div>
        <div class="stat-label"><i class="fas fa-folder"></i> Categories</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ stats.total_subcategories }}</div>
        <div class="stat-label"><i class="fas fa-tags"></i> Subcategories</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <i class="fas fa-clock"></i> Recent Products
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Product Name</th>
                <th>Category</th>
                <th>Subcategory</th>
                <th>Price</th>
                <th>Status</th>
                <th>Created</th>
            </tr>
        </thead>
        <tbody>
            {% for product in recent_products %}
            <tr>
                <td>{{ product.name }}</td>
                <td>{{ product.category_name }}</td>
                <td>{{ product.subcategory_name }}</td>
                <td>₹{{ product.price_current }}</td>
                <td>
                    {% if product.is_active %}
                    <span class="badge badge-success">Active</span>
                    {% else %}
                    <span class="badge badge-danger">Inactive</span>
                    {% endif %}
                </td>
                <td>{{ product.created_at[:10] }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}