{% if fridge_items or freezer_items or cupboard_items %}

{% if fridge_items %}
<h2>🧊 Fridge</h2>
<table>
  <thead><tr><th>Item</th><th>Qty</th><th>Expiry</th><th></th></tr></thead>
  <tbody>
    {% for item in fridge_items %}
    <tr id="pantry-row-{{ item.id }}">
      <td>{{ item.ingredient.name }}</td>
      <td>{{ item.quantity|floatformat:0 }} {{ item.unit }}</td>
      <td>
        {% if item.is_expired %}
          <span class="badge badge-expired">Expired {{ item.expiry_date }}</span>
        {% elif item.expiring_soon %}
          <span class="badge badge-expiring">{{ item.expiry_date }}</span>
        {% elif item.expiry_date %}
          <span class="badge badge-ok">{{ item.expiry_date }}</span>
        {% else %}
          <span style="color: var(--sage);">—</span>
        {% endif %}
        <button class="btn btn-sm btn-secondary" style="margin-left: 0.25rem; padding: 0.1rem 0.3rem; font-size: 0.7rem;"
                hx-post="{% url 'app-pantry-edit-expiry' item.id %}"
                hx-target="#pantry-row-{{ item.id }}"
                hx-swap="outerHTML"
                title="Change expiry">📅</button>
      </td>
      <td style="text-align: right; white-space: nowrap;">
        <button class="btn btn-sm btn-secondary" style="padding: 0.1rem 0.3rem; font-size: 0.7rem;"
                hx-post="{% url 'app-pantry-move' item.id %}"
                hx-target="#pantry-items"
                hx-vals='{"to": "freezer"}'
                title="Move to freezer">❄️</button>
        <button class="btn btn-danger btn-sm"
                hx-delete="{% url 'app-pantry-delete' item.id %}"
                hx-target="#pantry-items"
                hx-confirm="Remove {{ item.ingredient.name }}?">✕</button>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}

{% if freezer_items %}
<h2>❄️ Freezer</h2>
<table>
  <thead><tr><th>Item</th><th>Qty</th><th></th></tr></thead>
  <tbody>
    {% for item in freezer_items %}
    <tr id="pantry-row-{{ item.id }}">
      <td>{{ item.ingredient.name }}</td>
      <td>{{ item.quantity|floatformat:0 }} {{ item.unit }}</td>
      <td style="text-align: right; white-space: nowrap;">
        <button class="btn btn-sm btn-secondary" style="padding: 0.1rem 0.3rem; font-size: 0.7rem;"
                hx-post="{% url 'app-pantry-move' item.id %}"
                hx-target="#pantry-items"
                hx-vals='{"to": "fridge"}'
                title="Defrost → Fridge">🧊→</button>
        <button class="btn btn-danger btn-sm"
                hx-delete="{% url 'app-pantry-delete' item.id %}"
                hx-target="#pantry-items"
                hx-confirm="Remove {{ item.ingredient.name }}?">✕</button>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}

{% if cupboard_items %}
<h2>🗄️ Cupboard</h2>
<table>
  <thead><tr><th>Item</th><th>Qty</th><th></th></tr></thead>
  <tbody>
    {% for item in cupboard_items %}
    <tr id="pantry-row-{{ item.id }}">
      <td>{{ item.ingredient.name }}{% if item.is_staple %} <span style="color: var(--yellow); font-size: 0.7rem;">STAPLE</span>{% endif %}</td>
      <td>{{ item.quantity|floatformat:0 }} {{ item.unit }}</td>
      <td style="text-align: right;">
        <button class="btn btn-danger btn-sm"
                hx-delete="{% url 'app-pantry-delete' item.id %}"
                hx-target="#pantry-items"
                hx-confirm="Remove {{ item.ingredient.name }}?">✕</button>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}

{% else %}
<div class="empty">
  <div class="empty-icon">🥡</div>
  <p>Pantry's empty. Add some items above.</p>
</div>
{% endif %}