<!DOCTYPE html>

<html lang="de">

<head>


<meta charset="utf-8">

<title>
    ING Finanzen
</title>

<link rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}">


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

<div class="header">


<div class="header-left">

    <img class="logo-ing"
         src="{{ url_for('static', filename='logo_ing.png') }}">

    <div>

        <div class="title">
            ING Finanzen
        </div>

        <div class="subtitle">
            Kontobewegungen und Auswertungen
        </div>

    </div>

</div>

<img class="logo-hintergasse"
     src="{{ url_for('static', filename='logo_hintergasse.png') }}">


</div>

<div class="navbar">

    <a href="/">Dashboard</a>
    <a href="/categories">Kategorien</a>
    <a href="/maintenance">Wartung</a>
    <a href="/log">Log</a>

</div>

<div class="container">

<div class="cards">









    <div class="card">

        <h2>
            KW{{ week }}
        </h2>
        <p class="balance-label">
    Kontostand
</p>

<p class="balance-value balance-{{ balance_color }}">

    {% if balance is not none %}

        {{ "%.2f"|format(balance) }} €

    {% else %}

        n/v

    {% endif %}

</p>
        <p>
            Einnahmen:
            <strong>
                {{ "%.2f"|format(total_income) }} €
            </strong>
        </p>

        <p>
            Ausgaben:
            <strong>
                {{ "%.2f"|format(total_expenses) }} €
            </strong>
        </p>

        <p>
            Saldo:
            <strong>
                {{ "%.2f"|format(total_saldo) }} €
            </strong>
        </p>

    </div>
<div class="card">

    <h2>
        Kontostand letzte 30 Tage
    </h2>

    <canvas id="balanceChart"></canvas>

</div>
    <div class="card">

        <h2>
            Transaktionen in dieser Woche
        </h2>

        {% if transactions %}
<div class="transaction-container">
            <table class="transaction-table">
<thead>

<tr>

    <th>Datum</th>
    <th>Name</th>
    <th>Kategorie</th>
    <th>Betrag</th>

</tr>

</thead>

<tbody>
                {% for t in transactions|reverse %}

                <tr>

    <td>
        {{ t.date }}
    </td>

    <td>
        {{ t.applicant_name }}
    </td>

    <td>
        {{ t.category }}
    </td>

    <td class="{% if t.amount >= 0 %}amount-positive{% else %}amount-negative{% endif %}">
        {{ "%.2f"|format(t.amount) }} €
    </td>

</tr>

                {% endfor %}
</tbody>
            </table>

    </div>
        {% else %}

            <p>
                Keine Transaktionen vorhanden.
            </p>

        {% endif %}

    </div>

<div class="card">

    <h2>
        Unbekannte Buchungen
    </h2>

    {% if unknown_transactions %}

        <p>
            {{ unknown_transactions|length }}
            Buchungen offen
        </p>

        <table class="transaction-table">

            {% for t in unknown_transactions %}

            <tr>

                <td>
                    {{ t.date }}
                </td>

                <td>
                    {{ t.applicant_name }}
                </td>

                <td>
                    {{ "%.2f"|format(t.amount) }} €
                </td>

            </tr>

            {% endfor %}

        </table>

        <br>

        <a href="/categories">

            <button type="button">
                Kategorien öffnen
            </button>

        </a>

    {% else %}

        <p>
            Keine unbekannten Buchungen.
        </p>

    {% endif %}

</div>

</div>

</div>

<div class="footer">


Hintergasse © 2026


</div>


<script>

const history = {{ balance_history|tojson }};

const labels = history.map(item => item.date);
const values = history.map(item => item.value);

new Chart(
    document.getElementById("balanceChart"),
    {
        type: "line",

        data: {
            labels: labels,

            datasets: [{
                label: "Kontostand (€)",
                data: values,
                tension: 0.3
            }]
        },

        options: {
            responsive: true,

            plugins: {
                legend: {
                    display: false
                }
            },

            scales: {
                y: {
                    beginAtZero: false
                }
            }
        }
    }
);

</script>

</body>

</html>
