{% extends "base.html" %} {% block title %}Brewlog · Roast · {{ roast.name }}{% endblock %} {%
block content %}
<header class="flex flex-col gap-2">
  <h1 class="text-3xl font-semibold">{{ roast.name }}</h1>
  <p class="max-w-2xl text-sm text-stone-600">Detailed view for this roast.</p>
</header>

<section class="grid gap-4 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm">
  <dl class="grid gap-2 text-sm text-stone-700">
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">Roaster</dt>
      <dd class="text-right">{{ roast.roaster_label }}</dd>
    </div>
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">Origin</dt>
      <dd class="text-right">{{ roast.origin }}</dd>
    </div>
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">Region</dt>
      <dd class="text-right">{{ roast.region }}</dd>
    </div>
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">Producer</dt>
      <dd class="text-right">{{ roast.producer }}</dd>
    </div>
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">Process</dt>
      <dd class="text-right">{{ roast.process }}</dd>
    </div>
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">Created</dt>
      <dd class="text-right">{{ roast.created_at }}</dd>
    </div>
  </dl>
  {% if roast.tasting_notes.is_empty() %}
  <p class="text-sm text-stone-600">No tasting notes yet.</p>
  {% else %}
  <ul class="flex flex-wrap gap-2 text-sm">
    {% for note in roast.tasting_notes %}
    <li>
      <span
        class="inline-flex items-center rounded-full border border-amber-500/60 bg-amber-500/10 px-3 py-1 text-xs font-semibold text-amber-700"
        >{{ note }}</span
      >
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</section>

<section class="mt-8">
  <h2 class="mb-4 text-xl font-semibold text-amber-800">Bags</h2>
  {% if bags.is_empty() %}
  <p class="text-sm text-stone-600">No bags recorded for this roast.</p>
  {% else %}
  <div class="overflow-hidden rounded-lg border border-amber-300 bg-amber-100/80 shadow-sm">
    <table class="min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
      <thead class="bg-amber-200/60 text-xs font-semibold tracking-wide text-amber-900">
        <tr>
          <th scope="col" class="px-4 py-3">Created</th>
          <th scope="col" class="px-4 py-3">Amount</th>
          <th scope="col" class="px-4 py-3">Remaining</th>
          <th scope="col" class="px-4 py-3">Roast Date</th>
          <th scope="col" class="px-4 py-3">Status</th>
          <th scope="col" class="px-4 py-3">Finished</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-amber-200/70">
        {% for bag in bags %}
        <tr class="bg-amber-50/40 transition hover:bg-amber-50">
          <td class="px-4 py-3 whitespace-nowrap text-xs font-medium text-stone-600">
            {{ bag.created_at }}
          </td>
          <td class="px-4 py-3">{{ bag.amount }}g</td>
          <td class="px-4 py-3">{{ bag.remaining }}g</td>
          <td class="px-4 py-3">
            {% if let Some(date) = bag.roast_date %}{{ date }}{% else %}—{% endif %}
          </td>
          <td class="px-4 py-3">
            {% if bag.closed %}
            <span
              class="inline-flex items-center rounded-full bg-stone-100 px-2.5 py-0.5 text-xs font-medium text-stone-800"
            >
              Closed
            </span>
            {% else %}
            <span
              class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800"
            >
              Open
            </span>
            {% endif %}
          </td>
          <td class="px-4 py-3">{{ bag.finished_at }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</section>
{% endblock %}