{% 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 d-flex align-items-center justify-content-between">
        <!-- Previous Day Button -->
        <form method="get" action="{{url_for('user.daily_log', offset=offset - 1)}}" class="m-0">
            <button type="submit" class="btn btn-outline-primary d-flex align-items-center justify-content-center"
                style="width: 40px; height: 40px;">
                &laquo;
            </button>
        </form>

        <!-- Main Content -->
        <div class="flex-grow-1 text-center">
            <h2>Daily Overview ({{date}})</h2>

            <!-- Row 1 -->
            <div class="row justify-content-center text-center mb-2">
                <div class="col-auto">
                    <strong>Calories:</strong> {{ '%.0f' % calories }} kcal
                </div>
                <div class="col-auto">
                    <strong>Protein:</strong> {{ '%.1f' % protein }} g
                </div>
            </div>

            <!-- Row 2 -->
            <div class="row justify-content-center text-center">
                <div class="col-auto">
                    <strong>Carbs:</strong> {{ '%.1f' % carbs }} g
                </div>
                <div class="col-auto">
                    <strong>Fat:</strong> {{ '%.1f' % fat }} g
                </div>
            </div>
        </div>

        <!-- Next Day Button -->
        <form method="get" action="{{url_for('user.daily_log', offset=offset + 1)}}" class="m-0">
            <button type="submit" class="btn btn-outline-primary d-flex align-items-center justify-content-center"
                style="width: 40px; height: 40px;">
                &raquo;
            </button>
        </form>
    </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"
                            onsubmit="return confirm('Are you sure you want to delete this item?');">
                            <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%}