{% extends "base.html" %}

{% block title %}
Food Nutritional Info
{% endblock %}

{% block content %}

<!-- Daily Overview Section -->
<div class="container">

    <div class="mb-4 p-3 border rounded">
        <div class="text-center">
            <h2>Daily Overview ({{date}})</h2>
            <p>Summary info here...</p>
        </div>

    </div>

    <div class="p-3 border rounded">
        <div class="text-center">
            <h2>Eaten today</h2>
        </div>
        <div class="p-3 mb-2 border rounded">
            <!-- Header row (centered vertically for consistency) -->
            <div class="row align-items-center mb-2">
                <div class="col">
                    <h4 class="mb-0">Breakfast</h4>
                </div>
                <div class="col-auto text-end" style="min-width: 80px;">
                    <h4 class="mb-0">Amount</h4>
                </div>
                <div class="col-auto text-end" style="min-width: 80px;">
                    <a href="{{ url_for('add_meal.step1', meal_type=0) }}"
                        class="btn btn-sm btn-primary px-3 py-1">Add</a>
                </div>
            </div>

            <!-- Data rows -->
            <div>
                {% for log in logs[0] %}
                <div class="row mb-2">
                    <div class="col text-wrap">
                        {{ log.food_item.name }}
                    </div>
                    <div class="col-auto text-end align-self-start" style="min-width: 80px;">
                        {{ "{:g}".format(log.amount) }}
                    </div>
                    <div class="col-auto text-end align-self-start" style="min-width: 80px;">
                        <form method="POST" action="{{url_for('user.remove_log', id=log.id)}}" class="d-inline">
                            <button type="submit" class="btn btn-sm btn-danger px-3 py-1"
                                title="Delete">&times;</button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>




        <div class="p-3 mb-2 border rounded">
            <!-- Header row (centered vertically for consistency) -->
            <div class="row align-items-center mb-2">
                <div class="col">
                    <h4 class="mb-0">Lunch</h4>
                </div>
                <div class="col-auto text-end" style="min-width: 80px;">
                    <h4 class="mb-0">Amount</h4>
                </div>
                <div class="col-auto text-end" style="min-width: 80px;">
                    <a href="{{ url_for('add_meal.step1', meal_type=1) }}"
                        class="btn btn-sm btn-primary px-3 py-1">Add</a>
                </div>
            </div>

            <!-- Data rows -->
            <div>
                {% for log in logs[1] %}
                <div class="row mb-2">
                    <div class="col text-wrap">
                        {{ log.food_item.name }}
                    </div>
                    <div class="col-auto text-end align-self-start" style="min-width: 80px;">
                        {{ "{:g}".format(log.amount) }}
                    </div>
                    <div class="col-auto text-end align-self-start" style="min-width: 80px;">
                        <form method="POST" action="{{url_for('user.remove_log', id=log.id)}}" class="d-inline">
                            <button type="submit" class="btn btn-sm btn-danger px-3 py-1"
                                title="Delete">&times;</button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="p-3 mb-2 border rounded">
            <!-- Header row (centered vertically for consistency) -->
            <div class="row align-items-center mb-2">
                <div class="col">
                    <h4 class="mb-0">Dinner</h4>
                </div>
                <div class="col-auto text-end" style="min-width: 80px;">
                    <h4 class="mb-0">Amount</h4>
                </div>
                <div class="col-auto text-end" style="min-width: 80px;">
                    <a href="{{ url_for('add_meal.step1', meal_type=2) }}"
                        class="btn btn-sm btn-primary px-3 py-1">Add</a>
                </div>
            </div>

            <!-- Data rows -->
            <div>
                {% for log in logs[2] %}
                <div class="row mb-2">
                    <div class="col text-wrap">
                        {{ log.food_item.name }}
                    </div>
                    <div class="col-auto text-end align-self-start" style="min-width: 80px;">
                        {{ "{:g}".format(log.amount) }}
                    </div>
                    <div class="col-auto text-end align-self-start" style="min-width: 80px;">
                        <form method="POST" action="{{url_for('user.remove_log', id=log.id)}}" class="d-inline">
                            <button type="submit" class="btn btn-sm btn-danger px-3 py-1"
                                title="Delete">&times;</button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="p-3 mb-2 border rounded">
            <!-- Header row (centered vertically for consistency) -->
            <div class="row align-items-center mb-2">
                <div class="col">
                    <h4 class="mb-0">Snacks</h4>
                </div>
                <div class="col-auto text-end" style="min-width: 80px;">
                    <h4 class="mb-0">Amount</h4>
                </div>
                <div class="col-auto text-end" style="min-width: 80px;">
                    <a href="{{ url_for('add_meal.step1', meal_type=3) }}"
                        class="btn btn-sm btn-primary px-3 py-1">Add</a>
                </div>
            </div>

            <!-- Data rows -->
            <div>
                {% for log in logs[3] %}
                <div class="row mb-2">
                    <div class="col text-wrap">
                        {{ log.food_item.name }}
                    </div>
                    <div class="col-auto text-end align-self-start" style="min-width: 80px;">
                        {{ "{:g}".format(log.amount) }}
                    </div>
                    <div class="col-auto text-end align-self-start" style="min-width: 80px;">
                        <form method="POST" action="{{url_for('user.remove_log', id=log.id)}}" class="d-inline">
                            <button type="submit" class="btn btn-sm btn-danger px-3 py-1"
                                title="Delete">&times;</button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {% endblock%}