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

{% block content %}
<h1>
    {% if (current_user.is_authenticated) %}<img class="avatar avatar-xl" src="{{user.profile_image}}"/>{% endif %}
    {{ title }}
</h1>
<h3>{{ utc_dt }}</h3>


<style>
    #heatmap {
        display: grid;
        grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
        gap: 5px;
        width: 100%;
        table-layout: fixed;
    }

    .day {
        width: 50px;
        height: 50px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        table-layout: fixed;
    }



</style>


<div class="d-md-flex gap-3">

    {% include 'components/heatmap.html' %}


    {% include 'components/habit_lists.html' %}


    {% include 'components/delete_button.html' %}

</div>

{% include 'components/scripts.html' %}

{% endblock %}