{% if summary %}
<div class="card" style="margin-bottom: 1rem;">
  <div style="color: var(--teal-light); font-size: 0.85rem;">
    <strong style="color: var(--yellow);">{{ summary.total }} items</strong> suggested:
    {% if summary.staples %}<span>{{ summary.staples }} staple restock{{ summary.staples|pluralize }}</span>{% endif %}
    {% if summary.expiring %}• <span>{{ summary.expiring }} expiring</span>{% endif %}
    {% if summary.recipe_gaps %}• <span>{{ summary.recipe_gaps }} recipe gap{{ summary.recipe_gaps|pluralize }}</span>{% endif %}
  </div>
</div>
{% endif %}

{% regroup items by section as sections %}
{% for section in sections %}
<div class="shop-section">{{ section.grouper|default:"Other" }}</div>
{% for item in section.list %}
<div class="shop-item {% if item.checked %}checked{% endif %}">
  <input type="checkbox"
         {% if item.checked %}checked{% endif %}
         hx-post="{% url 'app-shopping-toggle' item.id %}"
         hx-target="#shopping-items"
         hx-swap="innerHTML">
  <span class="shop-name">
    {{ item.name }}
    {% if item.quantity %}<span style="color: var(--sage);">× {{ item.quantity|floatformat:0 }} {{ item.unit }}</span>{% endif %}
  </span>
  {% if item.reason %}
  <span style="color: var(--sage); font-size: 0.75rem; margin-left: auto;">{{ item.reason }}</span>
  {% endif %}
</div>
{% endfor %}
{% empty %}
<div class="empty">
  <div class="empty-icon">🛒</div>
  <p>Shopping list is empty. Hit "Generate Smart List" to get suggestions.</p>
</div>
{% endfor %}