{{ define "content" }}
<div class="page-head">
  <h1>{{ T "import.title" }}</h1>
  <a class="btn secondary" href="/catalog">← {{ T "nav.catalog" }}</a>
</div>

<div class="card">
  <p class="muted">{{ T "import.help" }}</p>
  <form id="import-form" hx-post="/api/import" hx-target="#import-result" hx-swap="innerHTML" enctype="multipart/form-data">
    <input type="hidden" name="commit" id="import-commit" value="0">
    <label>{{ T "import.file" }} <input type="file" name="file" accept=".csv,text/csv" required></label>
    <div style="display:flex; gap:.4rem; margin-top:.5rem">
      <button class="btn" type="submit" onclick="document.getElementById('import-commit').value='0'">{{ T "import.preview" }}</button>
      <button class="btn primary" type="submit" onclick="document.getElementById('import-commit').value='1'">{{ T "import.import" }}</button>
    </div>
  </form>
  <div id="import-result" style="margin-top:.8rem; overflow-x:auto"></div>
</div>

<div class="card" style="margin-top:1rem">
  <h3>{{ T "import.export_title" }}</h3>
  <p class="muted">{{ T "import.export_help" }}</p>
  <a class="btn" href="/api/catalog/export" download>{{ T "import.export_btn" }}</a>
</div>
{{ end }}