{% 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 %}