{% extends 'base/layout.html' %}
{% load form_helpers %}

{% block title %}Excel-Importvorschau{% endblock %}

{% block head %}
  {{ block.super }}
  <style>
    .excel-preview-content { max-height: 32rem; overflow: auto; }
    .excel-preview-content table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .825rem; }
    .excel-preview-content th, .excel-preview-content td { min-width: 7rem; max-width: 22rem; padding: .3rem .45rem; border: 1px solid var(--tblr-border-color, #adb5bd); vertical-align: top; overflow-wrap: anywhere; }
    .excel-preview-content th { background: var(--tblr-bg-surface-secondary, #f1f3f5); }
  </style>
{% endblock head %}

{% block content %}
<div class="card mb-4">
  <div class="card-body">
    <div class="d-flex flex-wrap gap-4">
      <div><strong>Datei:</strong> {{ batch.original_name }}</div>
      <div><strong>Zielordner:</strong> {{ batch.category|default:"Nicht mehr vorhanden" }}</div>
      <div><strong>Glätten:</strong> {% if batch.flatten %}Ja{% else %}Nein{% endif %}</div>
    </div>
  </div>
</div>

<form method="post">
  {% csrf_token %}
  {{ formset.management_form }}
  {% if formset.non_form_errors %}<div class="alert alert-danger">{{ formset.non_form_errors }}</div>{% endif %}

  {% for item in items %}
    <div class="card mb-4">
      <div class="card-header">
        <div class="row align-items-center w-100 g-3">
          <div class="col-auto">
            {{ item.form.include }}
            <label for="{{ item.form.include.id_for_label }}" class="ms-1">Importieren</label>
          </div>
          <div class="col">
            {{ item.form.index }}
            <label for="{{ item.form.title.id_for_label }}" class="form-label mb-1">Dokumenttitel</label>
            {{ item.form.title }}
            {% for error in item.form.title.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
          </div>
          <div class="col-auto text-muted">
            {{ item.sheet.images|length }} Bild{{ item.sheet.images|length|pluralize:"er" }}
          </div>
        </div>
      </div>
      <div class="card-body p-0">
        <details>
          <summary class="p-3 fw-bold" style="cursor:pointer">Vorschau der erzeugten Dokumentation anzeigen</summary>
          <div class="excel-preview-content border-top p-3 rendered-markdown">
            {{ item.preview_html|safe }}
          </div>
        </details>
      </div>
    </div>
  {% endfor %}

  <div class="sticky-actions sticky-actions-footer d-print-none" data-sticky-position="full" data-sticky-when="always">
    <div class="btn-list">
      <button type="submit" name="action" value="cancel" class="btn btn-outline-secondary">Abbrechen</button>
      <button type="submit" name="action" value="confirm" class="btn btn-primary"><i class="mdi mdi-file-import"></i> Ausgewählte Arbeitsblätter importieren</button>
    </div>
  </div>
</form>
{% endblock content %}