<script>
    function toggleSubtable(meal_name) {
        const subtable = document.getElementById('subtable-' + meal_name);
        subtable.classList.toggle('hidden');
}
</script>

<div class="container mx-auto mt-10">
    <div class="overflow-x-auto nutrition days">

        <!-- Bar at the Top -->
        <div class="bg-primary text-primary-content p-4 text-center">
            <h2 class="text-lg font-bold">Calories Calendar (Table)</h2>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Food</th>
                    <th>Calories</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for d in days %}
                <tr class="hover cursor-pointer {%cycle 'row-even' 'row-odd' %}" onclick="toggleSubtable('{{ d.date }}')">
                    <td>{{ d.date }}</td>
                    <td>{{ d.calories }}</td>
                    <td>
                        <a href="{% url 'day' d.date %}" class="text-blue-500 underline">Details</a>
                    </td>
                </tr>
                <tr id="subtable-{{ d.date }}" class="hidden">
                    <td colspan="3">
                        <div class="overflow-x-auto">
                            {% include 'django_nutrition/meals.html' with meals=d.meals %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <a href="{% url 'add_or_edit_portion' %}" class="text-blue-500 underline">New Portion</a>
</div>
