brewlog/templates/partials/forms/scan_result_form.html

      <div>
        <h3 class="text-base font-semibold text-stone-800">Roaster</h3>
        <p class="mt-1 text-sm text-stone-600">If this roaster already exists, it will be matched automatically.</p>
        <div class="mt-4 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="roaster_name" required class="input-field" placeholder="Example Coffee Roasters" data-bind:_roaster-name />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Country *</span>
            <input type="text" name="roaster_country" required class="input-field" placeholder="United States" data-bind:_roaster-country />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">City</span>
            <input type="text" name="roaster_city" class="input-field" placeholder="Portland" data-bind:_roaster-city />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Homepage</span>
            <input type="url" name="roaster_homepage" class="input-field" placeholder="https://example.coffee" data-bind:_roaster-homepage />
          </label>
        </div>
      </div>
      <div>
        <h3 class="text-base font-semibold text-stone-800">Roast</h3>
        <p class="mt-1 text-sm text-stone-600">Details about this specific coffee.</p>
        <div class="mt-4 grid gap-4 sm:grid-cols-2">
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Roast Name *</span>
            <input type="text" name="roast_name" required class="input-field" placeholder="Ethiopia Yirgacheffe" data-bind:_roast-name />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Origin *</span>
            <input type="text" name="origin" required class="input-field" placeholder="Ethiopia" data-bind:_origin />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Region *</span>
            <input type="text" name="region" required class="input-field" placeholder="Guji" data-bind:_region />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Producer *</span>
            <input type="text" name="producer" required class="input-field" placeholder="Chelbesa Cooperative" data-bind:_producer />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Process *</span>
            <input type="text" name="process" required class="input-field" placeholder="Washed" data-bind:_process />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Tasting Notes * (comma separated)</span>
            <textarea name="tasting_notes" rows="2" required class="input-field" placeholder="Blueberry, Jasmine" data-bind:_tasting-notes></textarea>
          </label>
        </div>
      </div>
      <div>
        <label class="inline-flex items-center gap-2 text-sm cursor-pointer">
          <input type="checkbox" name="open_bag" value="true" class="accent-orange-700" data-bind:_open-bag />
          <span class="font-semibold text-stone-800">Open a bag of this coffee</span>
        </label>
        <div data-show="$_openBag" class="mt-3 grid gap-4 sm:grid-cols-2">
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Amount (grams)</span>
            <input type="number" name="bag_amount" min="1" step="any" class="input-field" placeholder="250" data-bind:_bag-amount />
          </label>
        </div>
      </div>
      <p data-show="$_scanError" data-text="$_scanError" style="display:none" class="text-sm text-red-600"></p>
      <div data-show="$_scanSubmitting" style="display:none" class="flex items-center gap-3 text-sm text-accent">
        {% call icons::spinner("h-5 w-5") %}
        Saving&hellip;
      </div>
      <div data-show="!$_scanSubmitting" class="flex items-center justify-end gap-2">
        <button
          type="button"
          data-on:click="$_scanExtracted = false"
          class="rounded-md border px-4 py-2 text-sm font-semibold text-stone-700 transition hover:bg-surface-alt"
        >
          Cancel
        </button>
        <button
          type="submit"
          class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
        >
          Save Roaster &amp; Roast
        </button>
      </div>