{% extends "base.html" %}

{% block content %}
<div class="expenses-page">
    <h1>Ausgaben verwalten</h1>
    
    <div class="form-container">
        <h2>Neue Ausgabe hinzufügen</h2>
        <form action="{{ url_for('expenses') }}" method="post">
            <div class="form-group">
                <label for="amount">Betrag (€):</label>
                <input type="number" id="amount" name="amount" step="0.01" min="0.01" required>
            </div>
            
            <div class="form-group">
                <label for="description">Beschreibung:</label>
                <input type="text" id="description" name="description" required>
            </div>
            
            <div class="form-group">
                <label for="category_id">Kategorie:</label>
                <select id="category_id" name="category_id" required>
                    <option value="">-- Kategorie wählen --</option>
                    {% for category in categories %}
                    <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label for="date">Datum:</label>
                <input type="date" id="date" name="date" value="{{ today }}" required>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="button primary">Ausgabe speichern</button>
            </div>
        </form>
    </div>
    
    <div class="expenses-list">
        <h2>Alle Ausgaben</h2>
        <table>
            <thead>
                <tr>
                    <th>Datum</th>
                    <th>Beschreibung</th>
                    <th>Kategorie</th>
                    <th>Betrag</th>
                </tr>
            </thead>
            <tbody>
                {% for expense in expenses %}
                <tr>
                    <td>{{ expense.date.strftime('%d.%m.%Y') }}</td>
                    <td>{{ expense.description }}</td>
                    <td>{{ expense.category.name }}</td>
                    <td class="amount">{{ "%.2f"|format(expense.amount) }} €</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4" class="no-data">Keine Ausgaben vorhanden</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}