2{% extends 'layouts/main.html' %}

{% block content %}
<h1>{{ title }}</h1>
<h3>{{ utc_dt }}</h3>


<style>
    #heatmap {
        display: grid;
        grid-template-columns: repeat(7, 1fr); /* 7 Tage in einer Woche */
        gap: 5px;
    }

    .day {
        width: 50px; /* Ändere die Breite nach Bedarf */
        height: 50px; /* Ändere die Höhe nach Bedarf */
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

    <div id="heatmap"></div>

<script>
    // Funktion zur Rückgabe des Montagsdatums
    function getMonday(date) {
        const day = date.getDay();
        const diff = date.getDate() - day + (day === 0 ? -6 : 1); // Anpassung für Sonntag
        return new Date(date.setDate(diff));
    }

    // Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
    const activityData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1, 9, 5, 36, 75, 8, 9, 1, 0, 23, 0, 0, 0, 64, 0, 0, 64, 0, 0, 19, 84];

    // Funktion zum Erstellen der Heatmap
    function createHeatmap(data) {
        const heatmapContainer = document.getElementById('heatmap');

        // Aktuelles Datum des Montags
        const currentDate = new Date();
        const mondayDate = getMonday(currentDate);

        for (let i = 0; i < 7; i++) {
            const dayElement = document.createElement('div');
            dayElement.classList.add('day');
            dayElement.textContent = currentDate.toLocaleDateString('de-DE', { weekday: 'short' });
            heatmapContainer.appendChild(dayElement);
            currentDate.setDate(currentDate.getDate() + 1);
        }

        // Aktuelles Datum des Montags in der neuen linken Spalte
        for (let i = 0; i < 5; i++) {
            const dayElement = document.createElement('div');
            dayElement.classList.add('day');
            dayElement.textContent = mondayDate.toLocaleDateString('de-DE');
            heatmapContainer.appendChild(dayElement);

            for (let j = 0; j < 7; j++) {
                const opacity = data[i * 7 + j] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
                const dayElement = document.createElement('div');
                dayElement.classList.add('day');
                dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
                heatmapContainer.appendChild(dayElement);
            }
        }
    }

    // Erstelle die Heatmap mit den simulierten Daten
    createHeatmap(activityData);
</script>


<div class="row">
    <h2 class="col-10">Task List</h2>
    <a class="col-2 btn btn-primary" role="button" href="/habit">
        Task erstellen
    </a>
</div>

<ul class="task-list row">
    {% for habit in habits %}
    <li class="row col-md-4">
        <div class="col-auto">
            <input type="checkbox" class="task-checkbox">
        </div>

        <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
            {{ habit.name }} hhhbhghbhjndjksbeujsdkfheuwaihgkjfgfjnsidkgjnkdghujds
        </div>

    </li>

    <div class="col-md-8" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
        {{ habit.note }}
    </div>

    {% endfor %}
</ul>


{% endblock %}