{% extends 'base.html' %}
{% block title %}Importeren{% endblock %}
{% block content %}
<div class="head"><div><div class="kicker">Gegevens</div><h1>Importeren</h1></div></div>
<div class="row g-4 card-grid">
  <div class="col-xl-7">
    <form method="post" enctype="multipart/form-data" class="card"><div class="card-body">
      <h2>Bestand kiezen</h2>
      <div class="row g-3">
        <div class="col-12"><label class="form-label" for="kind">Wat importeer je?</label>
          <select class="form-select" id="kind" name="kind">
            <option value="contacts">Leads / klanten</option>
            <option value="relations" {{ 'selected' if request.args.get('kind') == 'relations' }}>Relaties (klanten of partners)</option>
            <option value="products" {{ 'selected' if request.args.get('kind') == 'products' }}>Producten</option>
          </select>
        </div>
        <div class="col-12"><label class="form-label" for="file">CSV- of JSON-bestand</label><input class="form-control" id="file" type="file" name="file" accept=".csv,.json,.txt" required></div>
      </div>
      <div class="actions"><button class="btn btn-primary">Volgende: kolommen controleren</button></div>
    </div></form>
  </div>
  <div class="col-xl-5">
    <div class="card"><div class="card-body">
      <h2>Formaten</h2>
      <p><strong>CSV</strong>: scheidingsteken <code>;</code>, <code>,</code> of tab, de eerste regel met kolomnamen. Regels die beginnen met <code>#</code> worden overgeslagen. Bedragen als <code>6,00</code>, <code>1.234,50</code> of <code>€ 6</code>.</p>
      <p><strong>JSON</strong>: een lijst met objecten, of een object met een lijst erin, zoals <code>{"leads": [{"naam": "…", "email": "…"}]}</code>.</p>
      <p><strong>Configurator</strong>: <code>kosten/leveranciers.csv</code> en <code>intern.csv</code> worden als producten herkend (code, omschrijving, eenheid, prijs, leverancier). Een woningontwerp (<code>house-design</code>-JSON) upload je bij een contact onder Bestanden.</p>
      <p class="muted">Je ziet eerst een voorbeeld en kiest per kolom waar die heen moet. Bestaande contacten (zelfde e-mail) en producten (zelfde SKU) worden bijgewerkt in plaats van dubbel aangemaakt. Elke productwijziging komt in de mutatiehistorie; offertes houden hun eigen prijs.</p>
    </div></div>
  </div>
</div>
{% endblock %}