NextReceipt/templates/receipt_form.html

<div id="receipt-form">
    {{if .AIError}}
    <div class="error-message" style="background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 1rem;">
        {{.AIError}}
    </div>
    {{end}}

    <div class="card" style="padding: 1rem;">
        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14 2 14 8 20 8"/>
            </svg>
            <span style="font-weight: 600;">Receipt Details</span>
            <span class="badge badge-open" style="margin-left: auto;">AI Extracted</span>
        </div>

        {{if .EditID}}
        <form hx-put="/purchases/{{.EditID}}" hx-target="#receipt-form" hx-swap="outerHTML"
              hx-indicator="#save-indicator">
        {{else}}
        <form hx-post="/purchases" hx-target="#receipt-form" hx-swap="outerHTML"
              hx-indicator="#save-indicator">
        {{end}}
            <input type="hidden" name="image_path" value="{{.ImagePath}}">
            {{if .EditID}}<input type="hidden" name="edit_id" value="{{.EditID}}">{{end}}

            <div class="form-group">
                <label for="product_name">Product / Item *</label>
                <input type="text" id="product_name" name="product_name" placeholder="e.g. Samsung TV, Nike Shoes..."
                       value="{{.ProductName}}" required>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="store">Store *</label>
                    <input type="text" id="store" name="store" placeholder="Store name"
                           value="{{.Store}}" required>
                </div>
                <div class="form-group">
                    <label for="category">Category *</label>
                    <select id="category" name="category" required>
                        <option value="">Select</option>
                        <option value="Electronics" {{if eq .Category "Electronics"}}selected{{end}}>Electronics</option>
                        <option value="Furniture" {{if eq .Category "Furniture"}}selected{{end}}>Furniture</option>
                        <option value="Appliances" {{if eq .Category "Appliances"}}selected{{end}}>Appliances</option>
                        <option value="Clothing" {{if eq .Category "Clothing"}}selected{{end}}>Clothing</option>
                        <option value="Home" {{if eq .Category "Home"}}selected{{end}}>Home</option>
                        <option value="Other" {{if eq .Category "Other"}}selected{{end}}>Other</option>
                    </select>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="amount">Price *</label>
                    <input type="number" id="amount" name="amount" step="0.01" min="0" placeholder="0.00"
                           value="{{.Amount}}" required inputmode="decimal">
                </div>
                <div class="form-group">
                    <label for="currency">Currency *</label>
                    <input type="text" id="currency" name="currency" placeholder="EUR, USD, GBP…"
                           value="{{.Currency}}" required maxlength="3" style="text-transform: uppercase;">
                </div>
            </div>

            <div class="form-group">
                <label for="date">Purchase Date *</label>
                <input type="date" id="date" name="date" value="{{.Date}}" required>
            </div>

            <div class="card" style="padding: 0.75rem; background: #064e3b; border: 1px solid #065f46; border-radius: 0.5rem; margin-bottom: 1rem;">
                <div style="font-size: 0.875rem; font-weight: 600; color: #6ee7b7; margin-bottom: 0.5rem;">
                    Warranty &amp; Return
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="warranty_months">Warranty (months)</label>
                        <input type="number" id="warranty_months" name="warranty_months" min="0" max="120" placeholder="0"
                               value="{{.WarrantyMonths}}" inputmode="numeric">
                    </div>
                    <div class="form-group">
                        <label for="return_days">Return Window (days)</label>
                        <input type="number" id="return_days" name="return_days" min="0" max="365" placeholder="0"
                               value="{{.ReturnDays}}" inputmode="numeric">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="notes">Notes</label>
                <textarea id="notes" name="notes" placeholder="Optional notes...">{{.Notes}}</textarea>
            </div>

            <div style="display: flex; gap: 0.5rem;">
                <button type="submit" class="btn btn-primary" id="save-indicator">
                    <span class="spinner htmx-indicator"></span>
                    {{if .EditID}}Update Purchase{{else}}Save Purchase{{end}}
                </button>
                <button type="button" class="btn btn-secondary"
                        onclick="document.getElementById('receipt-form').innerHTML = ''">
                    Cancel
                </button>
            </div>
        </form>
    </div>
</div>