{% extends 'cards/base.html' %}

{% block content %}
  <section class="section">
    <div class="level">
      <div class="level-left">
        <h2 class="title is-4">Export table of all dinosaurs</h2>
      </div>
      <div class="level-right">
        <div class="level-item">
          <a class="button is-light" href="{% url 'cards:list' %}">Back to list</a>
        </div>
      </div>
    </div>
    <p>Copy the JSON below and paste it into your web LLM interface. Ask the model to return a JSON array of objects with these fields: <code>pk</code> or <code>name</code>, <code>era</code> (<em>code</em>) and <code>era_display</code> (human label), <code>diet</code> and <code>diet_display</code>, <code>speed_kmh</code>, <code>weight_kg</code>, <code>height_m</code>, <code>intelligence</code>, <code>facts</code> (array or newline-separated string). When you get the model response, paste that JSON into the box below and click <strong>Preview pasted results</strong>.</p>

    <div class="field">
      <label class="label">Export (JSON)</label>
      <div class="control">
        <textarea id="export-table-text" class="textarea" rows="10">{{ json_text }}</textarea>
      </div>
      <div style="margin-top:0.5rem">
        <button class="button" onclick="(function(){var t=document.getElementById('export-table-text');t.select();try{navigator.clipboard.writeText(t.value);}catch(e){} })()">Copy JSON</button>
      </div>
    </div>

    <hr />

    <h3 class="title is-6">Paste LLM output</h3>
    <form method="post" hx-post="{% url 'cards:import_paste' %}" hx-target="#import-preview" hx-swap="innerHTML">
      {% csrf_token %}
      <div class="field">
        <div class="control">
          <textarea name="pasted" class="textarea" rows="12" placeholder='Paste the LLM response here (JSON array, NDJSON, or CSV/TSV)'></textarea>
        </div>
      </div>
      <div class="field">
        <div class="control">
          <button class="button is-primary" type="submit">Preview pasted results</button>
        </div>
      </div>
    </form>

    <div id="import-preview"></div>
  </section>
{% endblock %}