{% extends "base.html" %}

{% block body %}
  <div class="max-w-2xl mx-auto bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    <div class="p-6 border-b border-slate-100 bg-emerald-50 text-emerald-800">
      <h3 class="font-bold text-lg">Ausgabe erfolgreich erfasst!</h3>
      <p class="text-sm mt-1">Betrag: <span class="font-semibold">{{ csv_value_text }} €</span> | Beschreibung: <span class="font-semibold">{{ csv_value_disc }}</span></p>
    </div>

    <div class="p-6">
      <h4 class="font-bold text-slate-800 mb-4">Aktuelle Übersicht</h4>
      <div class="overflow-hidden border border-slate-100 rounded-xl">
        <table class="w-full text-left border-collapse">
          <thead>
            <tr class="bg-slate-50 text-slate-500 text-xs font-semibold uppercase tracking-wider border-b border-slate-100">
              <th class="px-6 py-3">Beschreibung</th>
              <th class="px-6 py-3 text-right">Ausgaben</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-100 text-slate-700">
            {% for name in data %}
              <tr class="hover:bg-slate-50/50 transition-colors">
                <td class="px-6 py-3 text-sm text-slate-800 font-medium">{{ name.get("beschreibung") }}</td>
                <td class="px-6 py-3 text-sm font-semibold text-slate-900 text-right">{{ name.get("ausgabe") }} €</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="mt-6 flex justify-between items-center bg-slate-50 p-4 rounded-xl border border-slate-100">
        <span class="text-slate-500 font-medium">Gesamtsumme:</span>
        <span class="text-xl font-bold text-slate-900">{{ sum_all }} €</span>
      </div>

      <div class="mt-6 text-center">
        <a href="/" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2.5 px-6 rounded-lg shadow transition-colors">
          Zurück zur Übersicht
        </a>
      </div>
    </div>
  </div>
{% endblock %}