{% comment %} HTMX fragment showing LLM suggestion and form to accept/apply it. {% endcomment %}
<div id="import-preview" class="box">
  {% if error %}
    <div class="notification is-danger">Error contacting LLM: {{ error }}</div>
  {% else %}
    <h4 class="title is-6">Import suggestions for {{ card.name }}</h4>
    <form hx-post="{% url 'cards:import_apply' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">
      <table class="table is-fullwidth">
        <tr><th>Field</th><th>Suggested</th></tr>
        <tr>
          <td>Speed (km/h)</td>
          <td><input name="speed_kmh" value="{{ suggestion.speed_kmh|default_if_none:'' }}" class="input" /></td>
        </tr>
        <tr>
          <td>Weight (kg)</td>
          <td><input name="weight_kg" value="{{ suggestion.weight_kg|default_if_none:'' }}" class="input" /></td>
        </tr>
        <tr>
          <td>Height (m)</td>
          <td><input name="height_m" value="{{ suggestion.height_m|default_if_none:'' }}" class="input" /></td>
        </tr>
        <tr>
          <td>Intelligence (1-5 or 0-100)</td>
          <td><input name="intelligence_score" value="{{ suggestion.intelligence_score|default_if_none:'' }}" class="input" /></td>
        </tr>
        <tr>
          <td>Facts</td>
          <td>
            <textarea name="facts" class="textarea" rows="6">{% if suggestion.facts %}{{ suggestion.facts|join:"\n" }}{% endif %}</textarea>
          </td>
        </tr>
      </table>
      {% if suggestion.sources %}
        <div class="content">
          <strong>Sources:</strong>
          <ul>
            {% for s in suggestion.sources %}
              <li>{% if s.url %}<a href="{{ s.url }}" target="_blank">{{ s.title|default:s.url }}</a>{% else %}{{ s.title }}{% endif %}</li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
      <div style="margin-top:0.5rem">
        <button class="button is-primary" type="submit">Apply</button>
        <button class="button" type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
      </div>
    </form>
  {% endif %}
</div>