{% import "partials/icons.html" as icons %}
{% macro card(bag, is_authenticated) %}
<div id="bag-card-{{ bag.id }}" class="rounded-lg border bg-surface p-4">
  <div class="min-w-0">
    <span class="block truncate font-semibold text-text">{{ bag.roast_name }}</span>
    <p class="truncate text-sm text-text-muted">{{ bag.roaster_name }}</p>
  </div>
  <div class="mt-2 h-1.5 rounded-full bg-surface-alt overflow-hidden">
    <div class="h-full rounded-full bg-accent" style="width: {{ bag.used_percent }}%"></div>
  </div>
  <p class="mt-1 truncate text-text-muted" style="font-variant: small-caps; font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</p>
  {% if is_authenticated %}
  <div class="mt-3 pt-3 border-t flex gap-3">
    <a href="/add?type=brew&bag_id={{ bag.id }}" class="inline-flex items-center gap-1 text-sm font-medium text-accent hover:text-accent-hover">
      {{ icons::plus_circle("h-4 w-4") }}
      Brew
    </a>
    <button
      type="button"
      class="inline-flex items-center gap-1 text-sm font-medium text-text-muted hover:text-text"
      onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
    >
      {{ icons::x_circle("h-4 w-4") }}
      Close
    </button>
  </div>
  {% endif %}
</div>
{% endmacro %}