{% extends "base.html" %}
{% block title %}Übersicht – Finanzberatung{% endblock %}
{% block content %}
<h1>Übersicht</h1>

{% if projection and projection.below_threshold_date %}
<div class="warning">
  Achtung: Prognostizierter Saldo unterschreitet den Schwellenwert am
  <strong>{{ projection.below_threshold_date.strftime('%d.%m.%Y') }}</strong>.
</div>
{% endif %}

<div class="total-balance {{ 'neg' if total < 0 else '' }}">
  Gesamtsaldo: {{ total|eur }} €
</div>

<table>
  <thead>
    <tr>
      <th>Konto</th><th>Bank</th><th>Saldo</th><th>Anker</th>
      <th>Umbenennen</th><th>Anker pflegen</th>
    </tr>
  </thead>
  <tbody>
    {% for account, balance in balances %}
    <tr>
      <td class="account">{{ account.name }}</td>
      <td>{{ account.bank }}</td>
      <td class="{{ 'neg' if balance < 0 else '' }}">{{ balance|eur }} €</td>
      <td>
        {% if account.anchor_date is not none and account.anchor_balance is not none %}
          Anker: {{ account.anchor_balance|eur }} € am {{ account.anchor_date.strftime('%d.%m.%Y') }}
        {% else %}
          kein Anker
        {% endif %}
      </td>
      <td>
        <form class="inline-form" hx-ext="json-form" hx-patch="/api/accounts/{{ account.id }}"
              hx-swap="none" hx-on::after-request="if(event.detail.successful){window.location.reload()}">
          <input type="text" name="name" value="{{ account.name }}" required maxlength="100">
          <button type="submit">Umbenennen</button>
        </form>
      </td>
      <td>
        <form class="inline-form" hx-ext="json-form" hx-patch="/api/accounts/{{ account.id }}"
              hx-swap="none" hx-on::after-request="if(event.detail.successful){window.location.reload()}">
          <input type="date" name="anchor_date"
                 value="{{ account.anchor_date.isoformat() if account.anchor_date is not none else '' }}" required>
          <input type="text" name="anchor_balance" data-type="amount" placeholder="500,00"
                 value="{{ account.anchor_balance|eur if account.anchor_balance is not none else '' }}" required>
          <button type="submit">Anker setzen</button>
        </form>
      </td>
    </tr>
    {% else %}
    <tr><td colspan="6">Keine Konten angelegt.</td></tr>
    {% endfor %}
  </tbody>
</table>

<h2>Nächste anstehende Posten (30 Tage)</h2>
<table>
  <thead>
    <tr><th>Datum</th><th>Bezeichnung</th><th>Betrag</th></tr>
  </thead>
  <tbody>
    {% for item in upcoming %}
    <tr>
      <td>{{ item.date.strftime('%d.%m.%Y') }}</td>
      <td>{{ item.name }}</td>
      <td class="{{ 'neg' if item.amount < 0 else '' }}">{{ item.amount|eur }} €</td>
    </tr>
    {% else %}
    <tr><td colspan="3">Keine anstehenden Posten.</td></tr>
    {% endfor %}
  </tbody>
</table>

<h2>Grafana-Dashboard</h2>
<iframe class="grafana" src="http://{{ request.url.hostname or '127.0.0.1' }}:8097/d/finanzen/finanzen?orgId=1&kiosk"></iframe>
<p class="hint">Kein Diagramm sichtbar? Einmal in
  <a href="http://{{ request.url.hostname or '127.0.0.1' }}:8097" target="_blank">Grafana anmelden</a>
  (gleiches Passwort wie hier).</p>
{% endblock %}