{% extends "kitchen/base.html" %}
{% block title %}Pantry — Kitchen{% endblock %}

{% block content %}
<h1>Pantry</h1>

<!-- Add item form -->
<div class="card" style="margin-bottom: 1.5rem;">
  <form hx-post="{% url 'app-pantry-add' %}" hx-target="#pantry-items" hx-swap="innerHTML" hx-on::after-request="if(event.detail.successful) this.reset()">
    {% csrf_token %}
    <div class="form-row">
      <div class="form-group" style="flex: 2;">
        <label for="ingredient_name">Ingredient</label>
        <input type="text" id="ingredient_name" name="ingredient_name" placeholder="e.g. chicken thighs" required style="width: 100%;">
      </div>
      <div class="form-group">
        <label for="quantity">Qty</label>
        <input type="number" id="quantity" name="quantity" step="0.01" placeholder="2" required style="width: 100%;">
      </div>
      <div class="form-group">
        <label for="unit">Unit</label>
        <input type="text" id="unit" name="unit" placeholder="items" required style="width: 100%;">
      </div>
      <div class="form-group">
        <label for="location">Location</label>
        <select id="location" name="location" style="width: 100%;">
          <option value="fridge">Fridge</option>
          <option value="freezer">Freezer</option>
          <option value="cupboard">Cupboard</option>
        </select>
      </div>
      <div class="form-group" style="display: flex; align-items: flex-end;">
        <button type="submit" class="btn btn-primary">Add</button>
      </div>
    </div>
  </form>
</div>

<!-- Pantry items -->
<div id="pantry-items">
  {% include "kitchen/partials/pantry_table.html" %}
</div>
{% endblock %}