{% macro card(bag, is_authenticated) %}
<div id="bag-card-{{ bag.id }}" class="rounded-lg border border-amber-200 bg-amber-50 p-4 shadow-sm">
  <div>
    <a href="/roasters/{{ bag.roaster_slug }}/roasts/{{ bag.roast_slug }}" class="font-semibold text-amber-800 hover:text-amber-600">{{ bag.roast_name }}</a>
    <p class="text-sm text-stone-500">{{ bag.roaster_name }}</p>
  </div>
  <p class="mt-2 text-sm text-stone-600">
    <span class="font-medium">{{ bag.remaining }}g</span>
    <span class="text-stone-400">of {{ bag.amount }}g remaining</span>
  </p>
  {% if is_authenticated %}
  <div class="mt-3 pt-3 border-t border-amber-100 flex gap-3">
    <a href="/brews?bag_id={{ bag.id }}" class="inline-flex items-center gap-1 text-sm font-medium text-amber-700 hover:text-amber-500">
      <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z" clip-rule="evenodd" />
      </svg>
      Brew
    </a>
    <button
      type="button"
      class="inline-flex items-center gap-1 text-sm font-medium text-stone-500 hover:text-stone-700"
      onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
    >
      <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
      </svg>
      Close
    </button>
  </div>
  {% endif %}
</div>
{% endmacro %}