{{ define "forms_pattern.html" }}
{{ template "demo_doc_start" . }}
    {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Tabbed/step-based forms with datalist suggestions, inline validation, and explicit review/confirm workflow." "back_url" "/" "back_text" "← Back to catalog") }}

    <section class="panel" id="forms-mode">
      <div class="panel-head"><h2>Mode Switch (Tabs)</h2></div>
      <div class="segmented">
        <a class="segment {{ if eq .Mode "register" }}active{{ end }}" href="{{ index .ModeURLs "register" }}">Manual register</a>
        <a class="segment {{ if eq .Mode "import" }}active{{ end }}" href="{{ index .ModeURLs "import" }}">Import-assisted</a>
      </div>
      <p class="meta" style="margin-top:10px;">Tabs preserve entered values while changing workflow mode.</p>
    </section>

    <section class="panel" id="forms-steps">
      <div class="panel-head"><h2>Step Flow</h2></div>
      <div class="segmented">
        <a class="segment {{ if eq .Step "edit" }}active{{ end }}" href="{{ index .StepURLs "edit" }}">Edit</a>
        <a class="segment {{ if eq .Step "review" }}active{{ end }}" href="{{ index .StepURLs "review" }}">Review</a>
        <a class="segment {{ if eq .Step "confirm" }}active{{ end }}" href="{{ index .StepURLs "confirm" }}">Done</a>
      </div>
      {{ if .Message }}<div class="notice" style="margin-top:12px;">{{ .Message }}</div>{{ end }}
    </section>

    <section class="panel" id="forms-contract">
      <div class="panel-head"><h2>Form Contract Demo</h2></div>
      <form class="forms-grid" method="get" action="/patterns/forms#forms-contract">
        <input type="hidden" name="mode" value="{{ .Mode }}">
        <input type="hidden" name="step" value="review">

        <label>Server serial {{ if index .FieldErrors "server_serial" }}<span class="field-error">{{ index .FieldErrors "server_serial" }}</span>{{ end }}
          <input class="{{ if index .FieldErrors "server_serial" }}input-error{{ end }}" name="server_serial" value="{{ .ServerSerial }}" list="forms-server-list" placeholder="SRV-001">
          <datalist id="forms-server-list">{{ range .ServerOptions }}<option value="{{ . }}"></option>{{ end }}</datalist>
        </label>

        <label>Location / slot {{ if index .FieldErrors "location" }}<span class="field-error">{{ index .FieldErrors "location" }}</span>{{ end }}
          <input class="{{ if index .FieldErrors "location" }}input-error{{ end }}" name="location" value="{{ .Location }}" list="forms-location-list" placeholder="AOC#1">
          <datalist id="forms-location-list">{{ range .LocationOptions }}<option value="{{ . }}"></option>{{ end }}</datalist>
        </label>

        <label>Component serial {{ if index .FieldErrors "component_serial" }}<span class="field-error">{{ index .FieldErrors "component_serial" }}</span>{{ end }}
          <input class="{{ if index .FieldErrors "component_serial" }}input-error{{ end }}" name="component_serial" value="{{ .ComponentSerial }}" list="forms-component-list" placeholder="NIC-AX210-001">
          <datalist id="forms-component-list">{{ range .ComponentOptions }}<option value="{{ . }}"></option>{{ end }}</datalist>
        </label>

        <label>Event date {{ if index .FieldErrors "event_date" }}<span class="field-error">{{ index .FieldErrors "event_date" }}</span>{{ end }}
          <input class="{{ if index .FieldErrors "event_date" }}input-error{{ end }}" type="date" name="event_date" value="{{ .EventDate }}">
        </label>

        <label class="full-row">Details
          <textarea name="details" rows="3" placeholder="Optional human-readable note">{{ .Details }}</textarea>
        </label>

        <label class="full-row">Import file (demo control)
          <input type="file" name="upload" accept=".csv,text/csv,application/json">
          <span class="meta">UI-only demo control: actual upload/parse flow is demonstrated in Import/Export pattern.</span>
        </label>

        <label class="checkbox-row full-row"><input type="checkbox" checked> Show suggestions from full query scope (not current page only)</label>
        <label class="checkbox-row full-row"><input type="checkbox"> Allow force action on ambiguous match (requires explicit review)</label>

        <div class="button-demo-row full-row">
          <button class="btn btn-primary" type="submit">Review</button>
          <a class="btn btn-secondary" href="{{ index .StepURLs "edit" }}">Stay in edit</a>
          <a class="btn btn-ghost" href="/patterns/forms#forms-contract">Reset</a>
        </div>
      </form>
    </section>

    {{ if or (eq .Step "review") (eq .Step "confirm") }}
    <section class="panel" id="forms-review">
      <div class="panel-head"><h2>{{ if eq .Step "confirm" }}Result Summary{{ else }}Review Summary{{ end }}</h2></div>
      <div class="table-wrap">
        <table class="ui-table">
          <tbody>
            <tr><th style="width:30%;">Mode</th><td>{{ .Mode }}</td></tr>
            <tr><th>Server serial</th><td>{{ if .ServerSerial }}{{ .ServerSerial }}{{ else }}<span class="meta">—</span>{{ end }}</td></tr>
            <tr><th>Location</th><td>{{ if .Location }}{{ .Location }}{{ else }}<span class="meta">—</span>{{ end }}</td></tr>
            <tr><th>Component serial</th><td>{{ if .ComponentSerial }}{{ .ComponentSerial }}{{ else }}<span class="meta">—</span>{{ end }}</td></tr>
            <tr><th>Date</th><td>{{ .EventDate }}</td></tr>
            <tr><th>Details</th><td>{{ if .Details }}{{ .Details }}{{ else }}<span class="meta">No note</span>{{ end }}</td></tr>
          </tbody>
        </table>
      </div>
      <div class="button-demo-row" style="margin-top:12px;">
        {{ if eq .Step "review" }}
        <a class="btn btn-secondary" href="{{ index .StepURLs "edit" }}">Back to edit</a>
        <a class="btn btn-primary" href="{{ index .StepURLs "confirm" }}">Confirm</a>
        {{ else }}
        <a class="btn btn-primary" href="{{ index .StepURLs "edit" }}">Start new</a>
        {{ end }}
      </div>
    </section>
    {{ end }}
{{ template "demo_doc_end" . }}
{{ end }}