Enhance LLM question import process with preview and confirmation steps, including error handling and M2M record creation

sbas/templates/sbas/import_llm_questions.html

@@ -2,10 +2,14 @@
 
 {% block content %}
   <h1>Import LLM Questions</h1>
-  <form method="post" enctype="multipart/form-data">
+  <form id="llm-import-form" method="post" enctype="multipart/form-data" hx-post="{% url 'sbas:import_llm_questions' %}" hx-target="#import-preview" hx-swap="innerHTML">
     {% csrf_token %}
     {{ form.as_p }}
-    <button class="btn btn-primary" type="submit">Upload and Import</button>
+    <div class="d-flex gap-2">
+      <button class="btn btn-outline-primary" type="submit">Preview (dry run)</button>
+      <button class="btn btn-secondary" type="button" onclick="document.getElementById('llm-import-form').reset()">Reset</button>
+    </div>
   </form>
-  <p>Upload a single JSON array, a single object, or JSONL (one JSON object per line) matching the agreed schema.</p>
+  <p>Upload a single JSON array, a single object, or JSONL (one JSON object per line) matching the agreed schema. Use the Preview button to inspect results before importing.</p>
+  <div id="import-preview" class="mt-3"></div>
 {% endblock %}

sbas/templates/sbas/partials/import_error.html

@@ -0,0 +1,8 @@
+<div class="alert alert-danger">
+  <h5>Import error</h5>
+  <ul>
+    {% for e in errors %}
+      <li>{{ e }}</li>
+    {% endfor %}
+  </ul>
+</div>

sbas/templates/sbas/partials/import_preview.html

@@ -0,0 +1,42 @@
+{% for item in items %}
+  <div class="card mb-2">
+    <div class="card-body">
+      <h5 class="card-title">Question {{ item.index }}</h5>
+      {% with payload=payloads|slice:item.index|first %}
+        {% if payload %}
+          <p><strong>Stem:</strong> {{ payload.stem|default:''|safe }}</p>
+          <p><strong>Answers:</strong>
+            <ul>
+              <li>A: {{ payload.a_answer|default:''|safe }}</li>
+              <li>B: {{ payload.b_answer|default:''|safe }}</li>
+              <li>C: {{ payload.c_answer|default:''|safe }}</li>
+              <li>D: {{ payload.d_answer|default:''|safe }}</li>
+              <li>E: {{ payload.e_answer|default:''|safe }}</li>
+            </ul>
+          </p>
+        {% endif %}
+      {% endwith %}
+      <p><strong>Missing M2M:</strong>
+        {% if item.missing_m2m %}
+          <ul>
+            {% for m in item.missing_m2m %}
+              <li>{{ m.model }}: {{ m.values|join:", " }}</li>
+            {% endfor %}
+          </ul>
+        {% else %}
+          None
+        {% endif %}
+      </p>
+      <div>
+        <label><input type="checkbox" name="selected" value="{{ item.index }}" checked> Include</label>
+      </div>
+    </div>
+  </div>
+{% endfor %}
+
+<div class="d-flex gap-2">
+  <button class="btn btn-success" hx-post="{% url 'sbas:import_llm_confirm' %}" hx-target="#import-result" hx-include="closest form">Import selected</button>
+  <button class="btn btn-secondary" hx-get="{% url 'sbas:import_llm_questions' %}" hx-target="#import-result">Cancel</button>
+</div>
+
+<div id="import-result"></div>

sbas/templates/sbas/partials/import_result.html

@@ -0,0 +1,21 @@
+<div class="alert alert-info">Imported {{ created }} questions.</div>
+{% if errors %}
+  <div class="alert alert-danger">
+    <h5>Errors</h5>
+    <ul>
+      {% for e in errors %}
+        <li>Item {{ e.index }}: {{ e.errors|join:', ' }}</li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endif %}
+{% if actually_created %}
+  <div class="alert alert-secondary">
+    <h5>Created M2M records</h5>
+    <ul>
+      {% for k,v in actually_created.items %}
+        <li>{{ k }}: {{ v|join:', ' }}</li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endif %}