{% load indonesian_filters %}
{% load static %}

<div class="card h-100">
    <div class="card-body">
        <div class="widget-header">
            <h5 class="widget-title">{{ widget.title }}</h5>
            <div class="widget-actions">
                <button class="btn btn-sm btn-outline-secondary" onclick="refreshWidget({{ widget.id }})">
                    <i class="fas fa-sync"></i>
                </button>
            </div>
        </div>
        <div class="widget-content">
            {% if data.total_products %}
            <div class="row text-center">
                <div class="col-6">
                    <div class="display-6">{{ data.total_products }}</div>
                    <div class="text-muted">Total Products</div>
                </div>
                <div class="col-6">
                    <div class="display-6">{{ data.low_stock_items }}</div>
                    <div class="text-muted">Low Stock Items</div>
                </div>
            </div>
            {% elif data.total_orders %}
            <div class="row text-center">
                <div class="col-6">
                    <div class="display-6">{{ data.total_orders }}</div>
                    <div class="text-muted">Sales Orders</div>
                </div>
                <div class="col-6">
                    <div class="display-6">{{ data.total_value|format_rupiah }}</div>
                    <div class="text-muted">Total Value</div>
                </div>
            </div>
            {% elif data.total_orders and data.completed_orders is not none %}
            <div class="row text-center">
                <div class="col-6">
                    <div class="display-6">{{ data.total_orders }}</div>
                    <div class="text-muted">Manufacturing Orders</div>
                </div>
                <div class="col-6">
                    <div class="display-6">{{ data.completed_orders }}</div>
                    <div class="text-muted">Completed</div>
                </div>
            </div>
            {% else %}
            <div class="text-center text-muted">
                No data available
            </div>
            {% endif %}
        </div>
    </div>
</div>