102 lines
3.9 KiB
HTML
102 lines
3.9 KiB
HTML
{% 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 %}
|