{% 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;
    }

    @media (max-width: 1400px) {
        .day {
            width: 40px;
            height: 40px;
        }
    }

    @media (max-width: 1200px) {
        .day {
            width: 35px;
            height: 35px;
        }
    }

    @media (max-width: 992px) {
        .day {
            width: 30px;
            height: 30px;
        }
    }

    @media (max-width: 767px) {
        .day {
            width: 50px;
            height: 50px;
        }
    }

    @media (max-width: 450px) {
        .day {
            width: 40px;
            height: 40px;
        }
    }

    @media (max-width: 400px) {
        .day {
            width: 35px;
            height: 35px;
        }
    }

    @media (max-width: 350px) {
        .day {
            width: 30px;
            height: 30px;
        }
    }

    @media (max-width: 300px) {
        .day {
            width: 25px;
            height: 25px;
        }
    }
</style>


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

    {% if current_user.is_authenticated %}
    {% include 'components/heatmap.html' %}
    {% endif %}

    {% if current_user.is_authenticated %}
    {% include 'components/habit_lists.html' %}
    {% endif %}

    {% if current_user.is_authenticated %}
    {% include 'components/delete_button.html' %}
    {% endif %}

    {% if current_user.is_authenticated %}
    {% include 'components/delete_list.html' %}
    {% endif %}

</div>

<script src="../static/script/script-index.js"></script>

{% endblock %}