<div class="card">
    <div class="card-body">
        <div class="col">
            <div class="minititle">mood</div>
            {% for pending_mood_log_date in pending_mood_logs %}
            <form class="moodlog-form" method="post" action="{% url 'orgapy:mood' %}">
                {% csrf_token %}
                <input type="text" name="date" value="{{ pending_mood_log_date | date:'Y-m-d' }}" hidden />
                <input type="text" name="mood" value="2" hidden>
                <input type="text" name="energy" value="2" hidden>
                <input type="text" name="health" value="2" hidden>
                <input type="text" name="stress" value="2" hidden>
                <div class="moodlog-bar">
                    <span class="moodlog-date">{{ pending_mood_log_date | date:'m-d' }}</span>
                    <button class="moodlog-tracker mood-neutral" name="mood" title="Mood"></button>
                    <button class="moodlog-tracker mood-neutral" name="energy" title="Energy"></button>
                    <button class="moodlog-tracker mood-neutral" name="health" title="Health"></button>
                    <button class="moodlog-tracker mood-neutral" name="stress" title="Stress"></button>
                    <div class="moodlog-activities-wrapper">
                        <input class="moodlog-activities" type="text" name="activities" placeholder="Activities" /> 
                        <div class="moodlog-activities-suggestions">{% for label, emoji in settings.mood_activities_list %}<button title="{{ label }}">{{ emoji }}</button>{% endfor %}</div>
                    </div>
                    <button class="moodlog-submit"><i class="ri-save-line"></i></button>
                </div>
            </form>
            {% endfor %}
        </div>
    </div>
    <script>inflateMoodLogForms();</script>
</div>