{% extends "base.html" %}
{% block title %}Aufteilung – Finanzberatung{% endblock %}
{% block content %}
<div class="aufteilung">
<h1>Aufteilung</h1>

<form method="get" action="/aufteilung" class="filter-form">
  <input type="hidden" name="gesendet" value="1">
  <label>Monat <input type="month" name="monat" value="{{ monat_wert }}" required></label>
  <label>Szenario
    <select name="szenario">
      <option value="">{{ plan_name }}</option>
      {% for sc in scenarios %}<option value="{{ sc.id }}"{% if sc.id == szenario_id %} selected{% endif %}>{{ sc.name }}</option>{% endfor %}
    </select>
  </label>
  <label><span><input type="checkbox" name="fixposten" value="1"{% if filters.recurring %} checked{% endif %}> Fixposten</span></label>
  <label><span><input type="checkbox" name="einmal" value="1"{% if filters.planned %} checked{% endif %}> Einmalposten</span></label>
  <label><span><input type="checkbox" name="kredite" value="1"{% if filters.loans %} checked{% endif %}> Kredite</span></label>
  <button type="submit">Anzeigen</button>
</form>

{% if monat_anzeige %}<p class="hinweis-klein">{{ monat_anzeige }} · {{ szenario_name }}</p>{% endif %}

{% if error %}
  <div class="warning" role="alert">{{ error }}</div>
{% elif b %}
  <div class="kennzahlen">
    <div><span>Einkünfte</span><strong>{{ s.income|eur }} €</strong></div>
    <div><span>Kosten</span><strong>{{ s.costs|eur }} €</strong></div>
    <div{% if s.deficit %} class="neg"{% endif %}><span>{{ 'Unterdeckung' if s.deficit else 'Frei verfügbar' }}</span><strong>{{ s.free|eur }} €</strong></div>
  </div>
  {% for k in b.conflicts %}
  <div class="warning">⚠ Fixposten „{{ k.posten_name }}“ zählt evtl. doppelt mit Kredit „{{ k.kredit_name }}“.</div>
  {% endfor %}
  {% if not b.rows %}
  <p>Für diese Auswahl gibt es keine Posten.</p>
  {% else %}
  {% if s.deficit %}
  <div class="warning">Kosten übersteigen die Einkünfte um {{ (s.costs - s.income)|eur }} € — das Diagramm zeigt die Aufteilung der Gesamtkosten.</div>
  {% endif %}
  <div class="aufteilung-grid">
    <div>
      <table>
        <thead>
          <tr><th>Posten</th><th>Kategorie</th><th>Art</th><th>Monatsbetrag</th><th>% der Einkünfte</th></tr>
        </thead>
        <tbody>
          {% for z in zeilen %}
          <tr>
            <td data-sort="{{ z.r.name }}">{{ z.r.name }}</td>
            <td>{{ z.r.category }}</td>
            <td>{{ z.art }}</td>
            <td class="amount{% if z.r.amount < 0 %} neg{% endif %}" data-sort="{{ z.r.amount }}">{{ z.r.amount|eur }} €</td>
            <td class="amount" data-sort="{{ z.anteil if z.anteil is not none else '' }}">{% if not z.einnahme %}{{ z.anteil|pct }}{% endif %}</td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot>
          <tr{% if s.deficit %} class="neg"{% endif %}>
            <th colspan="3">{{ 'Unterdeckung' if s.deficit else 'Frei verfügbar' }}</th>
            <td class="amount">{{ s.free|eur }} €</td>
            <td class="amount">{{ frei_anteil|pct }}</td>
          </tr>
        </tfoot>
      </table>
      <p>Gesamte Einkünfte: <strong>{{ s.income|eur }} €</strong></p>
    </div>
    <div>
      {% include "_aufteilung_torte.html" %}
    </div>
  </div>
  {% endif %}
{% endif %}
</div>
{% endblock %}