{% extends "base.html" %}
{% block title %}Import Persons - astro-mcp{% endblock %}
{% block content %}
<h1>Import Persons</h1>

<div class="toolbar">
  <a href="/dashboard/persons" class="btn btn-ghost">← Back to Persons</a>
</div>

{% if imported is not none %}
<div class="card">
  <h2>Import Results</h2>
  <p><strong>{{ imported }}</strong> person(s) imported successfully.</p>
  {% if errors %}
  <h3 style="color:#f85149;margin-top:1rem">Errors</h3>
  <ul style="color:#f85149;padding-left:1.5rem">
    {% for err in errors %}
    <li>{{ err }}</li>
    {% endfor %}
  </ul>
  {% endif %}
</div>
{% endif %}

<div class="card">
  <h2>Upload JSON File</h2>
  <p class="form-hint" style="margin-bottom:1rem">
    Upload a JSON file containing person data. The file should be either a single person object
    or an array of person objects. Each person must have at minimum: <code>name</code>,
    <code>birth_datetime</code>, <code>latitude</code>, <code>longitude</code>.
  </p>
  <form method="post" action="/dashboard/persons/import" enctype="multipart/form-data">
    <div class="form-group">
      <label for="import_file">JSON File</label>
      <input type="file" id="import_file" name="import_file" accept=".json,application/json" required>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Import</button>
      <a href="/dashboard/persons" class="btn btn-ghost">Cancel</a>
    </div>
  </form>
</div>

<div class="card">
  <h2>Expected JSON Format</h2>
  <pre style="background:#0d1117;padding:1rem;border-radius:6px;overflow-x:auto;font-size:0.8rem;color:#8b949e"><code>[
  {
    "name": "John Doe",
    "nickname": "john",
    "birth_datetime": "1990-05-15T08:30:00+02:00",
    "birthplace": "Vienna, Austria",
    "latitude": 48.2082,
    "longitude": 16.3738,
    "elevation": 171,
    "alive": true,
    "private": false,
    "gender": "male",
    "description": "A sample person",
    "notes": "Some notes here",
    "timezone": "Europe/Vienna",
    "birth_time_known": true
  }
]</code></pre>
</div>
{% endblock %}