{% extends "base.html" %}
{% block title %}Scope Import · {{ app_name }}{% endblock %}
{% block body %}
{% include "_nav.html" %}
<main class="container">
  <h1>Scope Import</h1>

  <div class="card">
    <h2>Upload spreadsheet</h2>
    <p class="muted">
      Upload an <code>.xlsx</code> file describing scopes (PartType = Scope). Rows are
      matched on <code>product_number</code>; re-uploading updates existing scopes.
    </p>
    <form hx-post="/admin/scope-import"
          hx-target="#scope-import-result"
          hx-swap="innerHTML"
          hx-encoding="multipart/form-data"
          hx-indicator="#import-indicator">
      <label>Spreadsheet
        <input type="file" name="file" accept=".xlsx" required>
      </label>
      <button type="submit" class="btn btn-primary">Import</button>
      <span id="import-indicator" class="htmx-indicator muted"> Importing…</span>
    </form>
    <details style="margin-top:1rem">
      <summary class="muted">Expected columns</summary>
      <ul class="muted">
        {% for col in expected_columns %}
        <li><code>{{ col }}</code></li>
        {% endfor %}
      </ul>
    </details>
  </div>

  <div id="scope-import-result"></div>
</main>
{% endblock %}