{% extends "base.html" %}

{% block content %}
<div class="reports-page">
    <h1>Ausgabenberichte</h1>
    
    <div class="filter-container">
        <h2>Zeitraum filtern</h2>
        <form action="{{ url_for('reports') }}" method="get">
            <div class="form-group inline">
                <label for="start_date">Von:</label>
                <input type="date" id="start_date" name="start_date" value="{{ start_date }}">
            </div>
            
            <div class="form-group inline">
                <label for="end_date">Bis:</label>
                <input type="date" id="end_date" name="end_date" value="{{ end_date }}">
            </div>
            
            <div class="form-actions">
                <button type="submit" class="button primary">Filter anwenden</button>
                <a href="{{ url_for('reports') }}" class="button secondary">Zurücksetzen</a>
            </div>
        </form>
    </div>
    
    <div class="charts-container">
        <div class="chart-box">
            <h2>Ausgaben nach Kategorie</h2>
            <div class="chart">
                {{ category_chart|safe }}
            </div>
        </div>
        
        <div class="chart-box">
            <h2>Ausgaben im Zeitverlauf</h2>
            <div class="chart">
                {{ timeline_chart|safe }}
            </div>
        </div>
    </div>
</div>
{% endblock %}