{% extends 'base.html' %}
{% block content %}
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
    <h2>Waste Management</h2>
    <a href="{{ url_for('waste_new') }}" class="btn-primary">Record Waste</a>
  </div>

  <div class="card">
    <table class="table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Weight (kg)</th>
          <th>Category</th>
          <th>Description</th>
          <th>Cost</th>
          <th>Recorded By</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for waste in wastes %}
        <tr>
          <td>{{ waste.date }}</td>
          <td class="highlight-quantity">{{ waste.weight_kg|kg }}</td>
          <td>
            {% if waste.category == 'spoilage' %}
              <span style="color: #dc2626;">🦠 Spoilage</span>
            {% elif waste.category == 'shrinkage' %}
              <span style="color: #f59e0b;">📉 Shrinkage</span>
            {% elif waste.category == 'damage' %}
              <span style="color: #ef4444;">💥 Damage</span>
            {% elif waste.category == 'expired' %}
              <span style="color: #8b5cf6;">⏰ Expired</span>
            {% else %}
              <span style="color: #6b7280;">❓ Other</span>
            {% endif %}
          </td>
          <td>{{ waste.description or '-' }}</td>
          <td>
            {% if waste.total_cost > 0 %}
              {{ waste.total_cost|currency }}
            {% else %}
              <span class="muted">-</span>
            {% endif %}
          </td>
          <td>{{ waste.creator.name }}</td>
          <td>
            <form method="POST" action="{{ url_for('waste_delete', waste_id=waste.id) }}" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this waste entry?');">
              <button type="submit" class="btn-outline" style="color: #dc2626; padding: 4px 12px; font-size: 12px;">Delete</button>
            </form>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="7" class="muted">No waste recorded yet.</td></tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr class="total-row">
          <th colspan="1">Total</th>
          <th class="highlight-quantity">{{ (wastes|sum(attribute='weight_kg'))|kg }}</th>
          <th colspan="3"></th>
          <th>{{ (wastes|sum(attribute='total_cost'))|currency }}</th>
          <th></th>
        </tr>
      </tfoot>
    </table>
  </div>

  <div class="card" style="margin-top: 16px; background-color: #fef3c7; border-color: #f59e0b;">
    <h3 style="color: #92400e; margin-top: 0;">💡 About Waste Tracking</h3>
    <p style="color: #78350f; margin: 0;">
      Record all waste, spoilage, shrinkage, and damage to maintain accurate inventory. 
      This helps you track where your inventory is going and identify areas for improvement.
    </p>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      initLiveSearch('waste-search', 'waste-table');
    });
  </script>
{% endblock %}