<!DOCTYPE html>

<html lang="de">

<head>


<meta charset="utf-8">

<title>
    Kategorien
</title>

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


</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">
            Kategorien verwalten
        </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="card">

    <h2>Neue Kategorie</h2>

    <form action="/categories/add"
          method="post">

        <input
            type="text"
            name="category"
            placeholder="Neue Kategorie"
            required>

        <button type="submit">
            Anlegen
        </button>

    </form>

</div>

<br>

<div class="card">

    <h2>Vorhandene Kategorien</h2>

    <table class="category-table">

        <thead>

        <tr>
            <th>Kategorie</th>
            <th>Schlüsselwörter</th>
            <th>Aktionen</th>
        </tr>

        </thead>

        <tbody>

        {% for category, words in categories.items() %}

        <tr>

            <td>
                {{ category }}
            </td>

            <td>
                {{ words|join(", ") }}
            </td>

            <td>

                <a class="action-link"
                   href="/categories/edit/{{ category }}">
                    Bearbeiten
                </a>

                &nbsp;|&nbsp;

                <a class="delete-link"
                   href="/categories/delete/{{ category }}"
                   onclick="return confirm('Kategorie wirklich löschen?')">
                    Löschen
                </a>

            </td>

        </tr>

        {% endfor %}

        </tbody>

    </table>

</div>


</div>

<div class="footer">

Hintergasse © 2026


</div>

</body>

</html>
