101 lines
3.7 KiB
HTML
101 lines
3.7 KiB
HTML
{% extends "base.html" %} {% block title %}Brewlog · Roasters{% endblock %} {% block content %}
|
|
<section data-signals:show-form="false">
|
|
<header class="flex flex-wrap items-start justify-between gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<h1 class="text-3xl font-semibold">Roasters</h1>
|
|
<p class="max-w-2xl text-sm text-stone-600">Browse the coffee roasters known to Brewlog.</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
|
|
data-class:hidden="$showForm"
|
|
data-on:click="$showForm = true"
|
|
aria-label="Add new roaster"
|
|
>
|
|
<span aria-hidden="true">+</span>
|
|
</button>
|
|
</header>
|
|
|
|
<div
|
|
class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
|
|
data-show="$showForm"
|
|
style="display: none"
|
|
>
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-amber-700">New Roaster</h2>
|
|
<p class="mt-1 text-sm text-stone-600">
|
|
Provide the core details and Brewlog will keep track of everything for you.
|
|
</p>
|
|
</div>
|
|
<form
|
|
method="post"
|
|
action="/api/v1/roasters"
|
|
class="mt-4 flex flex-col gap-4"
|
|
data-on:submit="@post('/api/v1/roasters?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
|
|
data-ref="form"
|
|
data-on:datastar-fetch="evt.detail.type === 'finished' && ($showForm = false, $form && $form.reset())"
|
|
>
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Name *</span>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
required
|
|
class="input-field"
|
|
placeholder="Example Coffee Roasters"
|
|
/>
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Country *</span>
|
|
<input
|
|
type="text"
|
|
name="country"
|
|
required
|
|
class="input-field"
|
|
placeholder="United States"
|
|
/>
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">City</span>
|
|
<input type="text" name="city" class="input-field" placeholder="Portland" />
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Homepage</span>
|
|
<input
|
|
type="url"
|
|
name="homepage"
|
|
class="input-field"
|
|
placeholder="https://example.coffee"
|
|
/>
|
|
</label>
|
|
<label class="sm:col-span-2 flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Notes</span>
|
|
<textarea
|
|
name="notes"
|
|
rows="3"
|
|
class="input-field"
|
|
placeholder="Short description, sourcing approach, or contact details"
|
|
></textarea>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800"
|
|
data-on:click="($showForm = false, $form && $form.reset())"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="rounded-md bg-amber-600 px-4 py-2 text-sm font-semibold text-amber-50 transition hover:bg-amber-500"
|
|
>
|
|
Save Roaster
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
{% include "partials/roaster_list.html" %} {% endblock %}
|