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

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


<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #dddddd;
        text-align: center;
        padding: 8px;
    }

    th {
        background-color: #f2f2f2;
    }

    .current-week {
        /* Change the color for the current week */
        background-color: rgba(255, 204, 0, 1); /* Full opacity */
    }

    .past-week {
        /* Change the color for past weeks */
        background-color: rgba(224, 224, 224, 1); /* Full opacity */
    }

    .future-week {
        /* Change the color for future weeks */
        background-color: rgba(192, 224, 192, 1); /* Full opacity */
    }

    .current-day {
        /* Highlight the current day */
        border: 2px solid #ff0000;
        border-radius: 5px;
    }
</style>

<table id="heatmap">
    <thead>
    <tr>
        <th></th> <!-- Empty cell for spacing -->
        <th class="past-week">-2</th>
        <th class="past-week">-1</th>
        <th class="current-week">0</th>
        <th class="future-week">+1</th>
        <th class="future-week">+2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td >Montag</td>
        <td class="past-week" data-tasks="5">15</td>
        <td class="past-week" data-tasks="8">20</td>
        <td class="current-week" data-tasks="12">25</td>
        <td class="future-week" data-tasks="7">30</td>
        <td class="future-week" data-tasks="10">35</td>
    </tr>
    <tr>
        <td class="current-day">Dienstag</td>
        <td class="past-week" data-tasks="5">15</td>
        <td class="past-week" data-tasks="8">20</td>
        <td class="current-week" data-tasks="12">25</td>
        <td class="future-week" data-tasks="7">30</td>
        <td class="future-week" data-tasks="10">35</td>
    </tr>
    <tr>
        <td >Mittwoch</td>
        <td class="past-week" data-tasks="5">15</td>
        <td class="past-week" data-tasks="8">20</td>
        <td class="current-week" data-tasks="12">25</td>
        <td class="future-week" data-tasks="7">30</td>
        <td class="future-week" data-tasks="10">35</td>
    </tr>
    <tr>
        <td >Donnerstag</td>
        <td class="past-week" data-tasks="5">15</td>
        <td class="past-week" data-tasks="8">20</td>
        <td class="current-week" data-tasks="12">25</td>
        <td class="future-week" data-tasks="7">30</td>
        <td class="future-week" data-tasks="10">35</td>
    </tr>
    <tr>
        <td >Freitag</td>
        <td class="past-week" data-tasks="5">15</td>
        <td class="past-week" data-tasks="8">20</td>
        <td class="current-week" data-tasks="12">25</td>
        <td class="future-week" data-tasks="7">30</td>
        <td class="future-week" data-tasks="10">35</td>
    </tr>
    <tr>
        <td >Samstag</td>
        <td class="past-week" data-tasks="5">15</td>
        <td class="past-week" data-tasks="8">20</td>
        <td class="current-week" data-tasks="12">25</td>
        <td class="future-week" data-tasks="7">30</td>
        <td class="future-week" data-tasks="10">35</td>
    </tr>    <tr>
        <td >Sonntag</td>
        <td class="past-week" data-tasks="5">15</td>
        <td class="past-week" data-tasks="8">20</td>
        <td class="current-week" data-tasks="12">25</td>
        <td class="future-week" data-tasks="7">30</td>
        <td class="future-week" data-tasks="10">35</td>
    </tr>

    </tbody>
</table>

<script>
    // Adjust background color based on the number of tasks
    document.addEventListener('DOMContentLoaded', function () {
        var cells = document.querySelectorAll('#heatmap tbody td');

        cells.forEach(function (cell) {
            var tasks = parseInt(cell.getAttribute('data-tasks')) || 0;
            var opacity = tasks / 20; // Adjust the denominator based on your preference

            // Get the RGB values from the background color
            var rgb = cell.style.backgroundColor.match(/\d+/g);

            // Calculate the green value based on the number of tasks
            var greenValue = Math.round(opacity * 255);

            // Set the new background color with adjusted green value
            cell.style.backgroundColor = 'rgba(0,' + greenValue + ',0,' + opacity + ')';
        });
    });
    </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 %}