{{ define "io_pattern.html" }}
{{ template "demo_doc_start" . }}
    {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Canonical file transfer UX: import preview/confirm and export with explicit scope/format selection." "back_url" "/" "back_text" "← Back to catalog") }}

    <section class="panel" id="io-import">
      <div class="panel-head"><h2>Import Workflow</h2></div>
      <div class="notice">{{ .ImportMessage }}</div>
      <form class="filters" method="get" action="/patterns/io#io-import">
        <input type="hidden" name="import_mode" value="{{ .ImportMode }}">
        <label>Source file
          <input type="text" name="file" value="{{ .FileName }}" placeholder="items.csv">
        </label>
        <label>Step
          <select name="import_mode">
            <option value="preview" {{ if eq .ImportMode "preview" }}selected{{ end }}>Preview</option>
            <option value="confirm" {{ if eq .ImportMode "confirm" }}selected{{ end }}>Confirm</option>
          </select>
        </label>
        <label>Validation profile
          <select>
            <option selected>strict</option>
            <option>lenient</option>
          </select>
        </label>
        <div class="filter-actions">
          <button class="btn btn-primary btn-pair" type="submit">Render state</button>
        </div>
      </form>

      <div class="table-wrap" style="margin-top:12px;">
        <table class="ui-table">
          <thead>
            <tr>
              <th>Row</th>
              <th>Code</th>
              <th>Name</th>
              <th>Qty</th>
              <th>Validation</th>
            </tr>
          </thead>
          <tbody>
            {{ range .PreviewRows }}
            <tr>
              <td>{{ .RowNo }}</td>
              <td>{{ .ItemCode }}</td>
              <td>{{ .Name }}</td>
              <td>{{ .Qty }}</td>
              <td><span class="status status-{{ if eq .Status "error" }}warning{{ else }}ready{{ end }}">{{ .Status }}</span></td>
            </tr>
            {{ end }}
          </tbody>
        </table>
      </div>
      <div class="button-demo-row" style="margin-top:12px;">
        {{ if eq .ImportMode "preview" }}
        <a class="btn btn-primary" href="/patterns/io?import_mode=confirm&file={{ .FileName }}#io-import">Review Import</a>
        {{ else }}
        <a class="btn btn-secondary" href="/patterns/io?import_mode=preview&file={{ .FileName }}#io-import">Back to preview</a>
        <a class="btn btn-primary" href="/patterns/io?import_mode=preview&file={{ .FileName }}#io-import">Confirm & Import (demo)</a>
        {{ end }}
      </div>
    </section>

    <section class="panel" id="io-export">
      <div class="panel-head"><h2>Export Workflow</h2></div>
      <div class="notice">{{ .ExportMessage }}</div>
      <form class="filters" method="get" action="/patterns/io#io-export">
        <input type="hidden" name="export_ready" value="1">
        <label>Format
          <select name="format">
            <option value="csv" {{ if eq .ExportFormat "csv" }}selected{{ end }}>CSV</option>
            <option value="json" {{ if eq .ExportFormat "json" }}selected{{ end }}>JSON (planned)</option>
          </select>
        </label>
        <label>Scope
          <select name="scope">
            <option value="filtered" {{ if eq .ExportScope "filtered" }}selected{{ end }}>Filtered rows</option>
            <option value="selected" {{ if eq .ExportScope "selected" }}selected{{ end }}>Selected rows</option>
            <option value="all" {{ if eq .ExportScope "all" }}selected{{ end }}>All rows</option>
          </select>
        </label>
        <label>Include headers
          <select>
            <option selected>Yes</option>
            <option>No</option>
          </select>
        </label>
        <div class="filter-actions">
          <button class="btn btn-primary btn-pair" type="submit">Prepare export</button>
        </div>
      </form>
      <div class="button-demo-row" style="margin-top:12px;">
        <a class="btn btn-primary" href="/patterns/io/export.csv?scope={{ .ExportScope }}">Download CSV</a>
        <a class="btn btn-ghost" href="/patterns/io#io-export">Reset</a>
      </div>
      <p class="meta" style="margin-top:10px;">Demo export endpoint includes UTF-8 BOM and semicolon delimiter to illustrate spreadsheet compatibility patterns.</p>
    </section>
{{ template "demo_doc_end" . }}
{{ end }}