{% extends 'base.html' %}
{% block content %}
  <h2>Inventory Report</h2>
  <div class="grid cols-4" style="margin-top:12px">
    <div class="card">
      <h3>Total Purchased</h3>
      <div class="stat">{{ total_purchased_kg|kg }}</div>
    </div>
    <div class="card">
      <h3>Total Sold</h3>
      <div class="stat">{{ total_sold_kg|kg }}</div>
    </div>
    <div class="card" style="border-color: #f59e0b; background-color: #fffbeb;">
      <h3 style="color: #92400e;">Total Waste</h3>
      <div class="stat" style="color: #b45309;">{{ total_waste_kg|kg }}</div>
    </div>
    <div class="card">
      <h3>Available Inventory</h3>
      <div class="stat">{{ inventory_kg|kg }}</div>
    </div>
  </div>

  <div class="card" style="margin-top: 16px;">
    <h3>Inventory Calculation</h3>
    <p style="margin: 8px 0; color: #666;">
      <strong>Available Inventory</strong> = Total Purchased - Total Sold - Total Waste
    </p>
    <p style="margin: 8px 0; color: #666;">
      {{ total_purchased_kg|kg }} - {{ total_sold_kg|kg }} - {{ total_waste_kg|kg }} = <strong>{{ inventory_kg|kg }}</strong>
    </p>
  </div>
{% endblock %}