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

{% block content %}
<h1>Shopping List</h1>

<div style="display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap;">
  <button class="btn btn-primary"
          hx-post="{% url 'app-shopping-generate' %}"
          hx-target="#shopping-items"
          hx-swap="innerHTML">
    🔄 Generate Smart List
  </button>
  <button class="btn btn-secondary"
          hx-post="{% url 'app-shopping-clear' %}"
          hx-target="#shopping-items"
          hx-swap="innerHTML"
          hx-confirm="Clear checked items?">
    Clear Checked
  </button>
</div>
<p style="color: var(--sage); font-size: 0.8rem; margin-bottom: 1.5rem;">
  Smart list checks: staples at zero, items expiring within 2 days, and ingredients needed for your recipes.
</p>

<div id="shopping-items">
  {% include "kitchen/partials/shopping_list.html" %}
</div>
{% endblock %}