{% extends "orgapy/layout/skeleton.html" %}
{% load static %}

{% block title %}Mood tracker{% endblock title %}

{% block head %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'orgapy/css/mood.css' %}" />
<script src="{% static 'orgapy/js/mood.js' %}"></script>
{% endblock head %}

{% block column_main %}
<div class="card">
    <h1 class="card-header">Mood tracker</h1>
    <div class="card-body"><div id="calendarContainer"></div></div>
    <div class="card-actions">
        <a id="buttonExport" class="button"><i class="ri-download-line"></i><span>Export</span></a>
    </div>
</div>
{% if pending_mood_logs %}{% include 'orgapy/partials/mood_log_forms.html' %}{% endif %}
<script>
bindCalendar(calendarContainer, buttonExport, {
    levelKey: "level",
    defaultMode: "monthly",
    additionnalClassName: "mood-palette",
    inflateDetails: (container, entries, isPopover) => {
        const entry = entries[0];
        if (isPopover) {
            create(container, "span").textContent = entry.label;
            const col = create(container, "div", "coll");
            const trackers = create(col, "div", "actionbar");
            create(trackers, "button", "mood-tracker " + entry.mood).title = "Mood";
            create(trackers, "button", "mood-tracker " + entry.energy).title = "Energy";
            create(trackers, "button", "mood-tracker " + entry.health).title = "Health";
            create(trackers, "button", "mood-tracker " + entry.stress).title = "Stress";
            if (entry.activities != "") {
                create(col, "div").textContent = entry.activities;
            }
        } else {
            if (entry.activities != "") {
                create(container, "div").textContent = entry.activities;
            }
        }
    }
});
</script>
{% endblock %}