{% extends 'base.html' %}
{% block content %}
  <h2>Record Waste</h2>

  <div class="card">
    <form method="post" class="form">
      {{ form.hidden_tag() }}
      
      <div class="field">
        <label class="label">{{ form.date.label }}</label>
        {{ form.date(type='date') }}
        {% if form.date.errors %}
          <div class="error">{{ form.date.errors[0] }}</div>
        {% endif %}
      </div>

      <div class="field">
        <label class="label">{{ form.weight_kg.label }}</label>
        {{ form.weight_kg(step='0.01', placeholder='e.g., 10.50') }}
        {% if form.weight_kg.errors %}
          <div class="error">{{ form.weight_kg.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Enter the weight of waste in kilograms</small>
      </div>

      <div class="field">
        <label class="label">{{ form.category.label }}</label>
        {{ form.category() }}
        {% if form.category.errors %}
          <div class="error">{{ form.category.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Select the type of waste</small>
      </div>

      <div class="field">
        <label class="label">{{ form.description.label }}</label>
        {{ form.description(rows='3', placeholder='Describe the waste: e.g., "Expired chicken from yesterday\'s purchase", "Damaged during transport", etc.') }}
        {% if form.description.errors %}
          <div class="error">{{ form.description.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Optional: Add details about the waste</small>
      </div>

      <div class="field">
        <label class="label">{{ form.cost_per_kg.label }}</label>
        {{ form.cost_per_kg(step='0.01', placeholder='e.g., 150.00') }}
        {% if form.cost_per_kg.errors %}
          <div class="error">{{ form.cost_per_kg.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Optional: Average cost per kg (auto-filled from recent purchases)</small>
      </div>

      <div style="margin-top: 20px;">
        {{ form.submit(class_='btn-primary') }}
        <a href="{{ url_for('waste_list') }}" class="btn-outline" style="margin-left: 12px;">Cancel</a>
      </div>
    </form>
  </div>

  <div class="card" style="margin-top: 16px; background-color: #eff6ff; border-color: #3b82f6;">
    <h3 style="color: #1e40af; margin-top: 0;">📋 Waste Categories</h3>
    <ul style="color: #1e3a8a; margin: 0; padding-left: 20px;">
      <li><strong>Spoilage:</strong> Expired or rotten chicken</li>
      <li><strong>Shrinkage:</strong> Natural weight loss during storage</li>
      <li><strong>Damage:</strong> Physical damage during handling/transport</li>
      <li><strong>Expired:</strong> Past sell-by date</li>
      <li><strong>Other:</strong> Any other type of waste</li>
    </ul>
  </div>
{% endblock %}