{{/* Reusable prompt card partial - expects . to be a PromptView */}}
<div class="prompt-item prompt-pending" data-prompt-id="{{.ID}}">
  <a href="#" class="prompt-dismiss" onclick="showDismissConfirm(this, '{{.ID}}'); return false;" title="Don't ask again">✕</a>
  <div class="dismiss-confirm">
    <span>Stop tracking?</span>
    <a href="#" onclick="confirmDismiss('{{.ID}}'); return false;">Yes</a>
    <a href="#" onclick="hideDismissConfirm(this); return false;">No</a>
  </div>
  <form class="prompt-form" data-prompt-id="{{.ID}}">
    <div class="prompt-header">
      <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
        <div>
          <span class="prompt-question">{{.Question}}</span>
          {{if .ScheduleFormatted}}
            <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 4px;">🔁 {{.ScheduleFormatted}}</div>
          {{end}}
        </div>
        <div style="display: flex; gap: 12px; align-items: center;">
          <span class="prompt-category">{{.Category}}</span>
          <span class="prompt-due">{{.NextAskFormatted}}</span>
        </div>
      </div>
    </div>
    <div class="prompt-body">
    {{if .Groups}}
      {{if eq .Layout "two-column"}}
        {{/* Two-column layout - first two groups side-by-side */}}
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start;">
          {{range $i, $g := .Groups}}
            {{if lt $i 2}}
              <div class="prompt-group">
                {{if $g.Title}}<div class="prompt-group-title">{{$g.Title}}</div>{{end}}
                <div class="prompt-input-row" style="flex-direction: column; align-items: flex-start; gap: 8px;">
                  {{range $g.Fields}}
                    {{if eq .Type "number"}}
                      <div style="display: flex; align-items: center; gap: 4px; width: 100%;">
                        {{if .Label}}<span class="prompt-field-label" style="min-width: 100px;">{{.Label}}:</span>{{end}}
                        <input type="number" name="field_{{.Key}}"
                               {{if .Min}}min="{{.Min}}"{{end}}
                               {{if .Max}}max="{{.Max}}"{{end}}
                               {{if .Step}}step="{{.Step}}"{{end}}
                               {{if .Value}}value="{{.Value}}"{{end}}
                               class="prompt-input-number"
                               style="max-width: 80px;"
                               onkeydown="if(event.key==='Enter'){event.preventDefault();saveItem(this.closest('.prompt-item'));}">
                        {{if .Unit}}<span class="prompt-unit">{{.Unit}}</span>{{end}}
                      </div>
                    {{end}}
                  {{end}}
                </div>
              </div>
            {{end}}
          {{end}}
        </div>
        {{/* Remaining groups below (index 2+) with save button inline */}}
        {{range $i, $g := .Groups}}
          {{if ge $i 2}}
            <div class="prompt-group" style="margin-top: 16px;">
              {{if $g.Title}}<div class="prompt-group-title">{{$g.Title}}</div>{{end}}
              {{range $g.Fields}}
                {{if eq .Type "text"}}
                  <div style="display: flex; align-items: center; gap: 8px;">
                    <input type="text" name="field_{{.Key}}"
                           {{if .Value}}value="{{.Value}}"{{end}}
                           {{if .MaxLength}}maxlength="{{.MaxLength}}"{{end}}
                           class="prompt-input-text"
                           style="flex: 1;"
                           placeholder="{{.Label}}">
                    <button type="button" class="btn-save" onclick="saveItem(this.closest('.prompt-item'))">Save</button>
                  </div>
                {{end}}
              {{end}}
            </div>
          {{end}}
        {{end}}
        {{/* Save button if no text fields */}}
        {{$hasText := false}}
        {{range .Groups}}
          {{range .Fields}}
            {{if eq .Type "text"}}{{$hasText = true}}{{end}}
          {{end}}
        {{end}}
        {{if not $hasText}}
          <div style="display: flex; justify-content: flex-end; margin-top: 12px;">
            <button type="button" class="btn-save" onclick="saveItem(this.closest('.prompt-item'))">Save</button>
          </div>
        {{end}}
      {{else}}
        {{/* Regular grouped fields */}}
        {{range .Groups}}
          <div class="prompt-group">
            {{if .Title}}<div class="prompt-group-title">{{.Title}}</div>{{end}}
            <div class="prompt-input-row" style="justify-content: flex-start; align-items: center; flex-wrap: wrap;">
              {{range .Fields}}
                {{if eq .Type "number"}}
                  <div style="display: flex; align-items: center; gap: 4px; margin-right: 16px;">
                    {{if .Label}}<span class="prompt-field-label">{{.Label}}:</span>{{end}}
                    <input type="number" name="field_{{.Key}}"
                           {{if .Min}}min="{{.Min}}"{{end}}
                           {{if .Max}}max="{{.Max}}"{{end}}
                           {{if .Step}}step="{{.Step}}"{{end}}
                           {{if .Value}}value="{{.Value}}"{{end}}
                           class="prompt-input-number"
                           style="max-width: 80px;"
                           onkeydown="if(event.key==='Enter'){event.preventDefault();saveItem(this.closest('.prompt-item'));}">
                    {{if .Unit}}<span class="prompt-unit">{{.Unit}}</span>{{end}}
                  </div>
                {{else if eq .Type "text"}}
                  <div style="display: flex; align-items: center; gap: 4px; width: 100%;">
                    <input type="text" name="field_{{.Key}}"
                           {{if .Value}}value="{{.Value}}"{{end}}
                           {{if .MaxLength}}maxlength="{{.MaxLength}}"{{end}}
                           class="prompt-input-text"
                           style="flex: 1;"
                           placeholder="{{.Label}}">
                  </div>
                {{end}}
              {{end}}
            </div>
          </div>
        {{end}}
        <div style="display: flex; justify-content: flex-end; margin-top: 12px;">
          <button type="button" class="btn-save" onclick="saveItem(this.closest('.prompt-item'))">Save</button>
        </div>
      {{end}}
    {{else if .Fields}}
      {{/* Flat fields */}}
      <div class="prompt-input-row" style="justify-content: flex-start; align-items: center;">
        {{range .Fields}}
          {{if eq .Type "number"}}
            {{if .Label}}<span class="prompt-field-label">{{.Label}}</span>{{end}}
            <input type="number" name="field_{{.Key}}"
                   {{if .Min}}min="{{.Min}}"{{end}}
                   {{if .Max}}max="{{.Max}}"{{end}}
                   {{if .Step}}step="{{.Step}}"{{end}}
                   {{if .Value}}value="{{.Value}}"{{else}}placeholder="0"{{end}}
                   class="prompt-input-number"
                   style="max-width: 120px;"
                   onkeydown="if(event.key==='Enter'){event.preventDefault();saveItem(this.closest('.prompt-item'));}">
            {{if .Unit}}<span class="prompt-unit">{{.Unit}}</span>{{end}}
          {{else if eq .Type "checkbox"}}
            <button type="button" class="prompt-btn" data-field="{{.Key}}" data-value="yes" onclick="selectYesNo(this)">Yes</button>
            <button type="button" class="prompt-btn" data-field="{{.Key}}" data-value="no" onclick="selectYesNo(this)">No</button>
            <input type="hidden" name="field_{{.Key}}" value="">
          {{else if eq .Type "text"}}
            {{if .Label}}<span class="prompt-field-label">{{.Label}}</span>{{end}}
            <input type="text" name="field_{{.Key}}"
                   {{if .Value}}value="{{.Value}}"{{end}}
                   {{if .MaxLength}}maxlength="{{.MaxLength}}"{{end}}
                   class="prompt-input-text"
                   placeholder="{{.Label}}"
                   onkeydown="if(event.key==='Enter'){event.preventDefault();saveItem(this.closest('.prompt-item'));}">
          {{end}}
        {{end}}
        <button type="button" class="btn-save" onclick="saveItem(this.closest('.prompt-item'))" style="margin-left: auto;">Save</button>
      </div>
    {{end}}
    </div>
  </form>
</div>