{% extends "base.html" %}

{% block title %}
Data Table
{% endblock %}

{% block content %}

    <h1>Data Table</h1>
    <table border="1">
        <thead>
            <tr>
                <th>Year</th>
                <th>Monat</th>
                <th>Day</th>
                <th>Vertragskonto</th>
                <th>Zählpunkt</th>
                <th>Adresse</th>
                <th>Verbrauch_kWh</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            {% for item in data %}
            <tr>
                <td>{{ item.Year }}</td>
                <td>{{ item.Monat }}</td>
                <td>{{ item.Day }}</td>
                <td>{{ item.Vertragskonto }}</td>
                <td>{{ item.Zählpunkt }}</td>
                <td>{{ item.Adresse }}</td>
                <td>{{ item.Verbrauch_kWh }}</td>
                <td>{{ item.Date }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <canvas id="timeseriesChart" width="800" height="400"></canvas>

    <!-- Include Chart.js library -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        var ctx = document.getElementById('timeseriesChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [{% for data_point in filtered_data %}"{{ data_point.Date }}",{% endfor %}],
                datasets: [{
                    label: 'Verbrauch_kWh',
                    data: [{% for data_point in filtered_data %}{{ data_point.Verbrauch_kWh }},{% endfor %}],
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
{% endblock %}