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

{% block content %}
<h1><img class="avatar avatar-xl" src="{{user.profile_image}}"/>
    {{ 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' %}


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Bestätige</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Möchtest du dieses Habit wirklich löschen?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary btn-danger" data-bs-dismiss="modal"
                            onclick="deleteHabit(selectedHabitId)">Löschen
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

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

{% endblock %}