{% extends "admin/base.html" %}
{% block title %}Übersicht{% endblock %}
{% block content %}

<section class="dropzone-section">
  <h2>CSV hochladen</h2>
  <form method="post" action="{{ url_for('admin_upload') }}" enctype="multipart/form-data" id="upload-form">
    <label class="dropzone" id="dropzone">
      <input type="file" name="csv" accept=".csv,text/csv" id="csv-input">
      <span>Befüllte CSV hier ablegen oder klicken —<br>
      die Tabelle wird am Dateinamen bzw. an den Spalten erkannt.</span>
    </label>
    <div class="upload-row">
      <label for="slug-select">Zieltabelle:</label>
      <select name="slug" id="slug-select">
        <option value="">automatisch erkennen</option>
        {% for t in tables %}
        <option value="{{ t.slug }}">{{ t.title }}</option>
        {% endfor %}
      </select>
      <button type="submit">Hochladen &amp; veröffentlichen</button>
    </div>
  </form>
</section>

<section>
  <h2>Gehostete Tabellen</h2>
  {% if not tables %}
  <p class="empty">Noch keine Tabellen — <a href="{{ url_for('admin_new') }}">lege die erste an</a>.</p>
  {% endif %}

  {% for t in tables %}
  <article class="table-card">
    <div class="card-qr">{{ qr_svg(t.url) | safe }}</div>
    <div class="card-body">
      <h3>{{ t.title }}</h3>
      <p class="card-url">
        {% if t.published %}
        <a href="{{ t.url }}">{{ t.url }}</a>
        {% else %}
        <span class="muted">{{ t.url }} — noch keine CSV hochgeladen</span>
        {% endif %}
      </p>
      <p class="card-meta">
        {{ t.versions | length }} Version(en)
        {% if t.last_upload %}· letzte: {{ t.last_upload[:-4] }}{% endif %}
      </p>
      <p class="card-actions">
        <a class="btn" href="{{ url_for('admin_template', slug=t.slug) }}">CSV-Vorlage</a>
        {% if t.versions %}
        <details class="versions">
          <summary class="btn">Versionen (CSV-Download)</summary>
          <ul>
            {% for v in t.versions %}
            <li><a href="{{ url_for('admin_download', slug=t.slug, filename=v) }}">{{ v }}</a></li>
            {% endfor %}
          </ul>
        </details>
        {% endif %}
        <form method="post" action="{{ url_for('admin_delete', slug=t.slug) }}"
              onsubmit="return confirm('Tabelle {{ t.slug }} samt aller Versionen löschen?')">
          <button type="submit" class="btn btn-danger">Löschen</button>
        </form>
      </p>
    </div>
  </article>
  {% endfor %}
</section>

<script>
const zone = document.getElementById("dropzone");
const input = document.getElementById("csv-input");
const form = document.getElementById("upload-form");
["dragover", "dragenter"].forEach(ev =>
  zone.addEventListener(ev, e => { e.preventDefault(); zone.classList.add("drag"); }));
["dragleave", "drop"].forEach(ev =>
  zone.addEventListener(ev, () => zone.classList.remove("drag")));
zone.addEventListener("drop", e => {
  e.preventDefault();
  if (e.dataTransfer.files.length) {
    input.files = e.dataTransfer.files;
    form.submit();
  }
});
input.addEventListener("change", () => { if (input.files.length) form.submit(); });
</script>
{% endblock %}