{% extends "base.html" %}

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

{% block content %}
<div class="container-fluid mt-5">
    <h1 class="mb-4">Food Nutritional Information (per 100g/100ml)</h1>
    <div class="table-responsive">
        <table class="table table-bordered table-hover align-middle">
            <thead class="table-dark">
                <tr>
                    <th>Name</th>
                    <th>Energy (kcal)</th>
                    <th>fat (g)</th>
                    <th>Saturated fat (g)</th>
                    <th>Sugars (g)</th>
                    <th>Carbs (g)</th>
                    <th>Protein (g)</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for food in items %}
                <tr>
                    <td class="bg-body-tertiary">{{ food.name }}</td>
                    <td class="bg-body-tertiary">{{ food.energy_100 }}</td>
                    <td class="bg-body-tertiary">{{ food.fat_100 }}</td>
                    <td class="bg-body-tertiary">{{ food.saturated_fat_100 }}</td>
                    <td class="bg-body-tertiary">{{ food.sugar_100 }}</td>
                    <td class="bg-body-tertiary">{{ food.carbs_100 }}</td>
                    <td class="bg-body-tertiary">{{ food.protein_100 }}</td>
                    <td class="bg-body-tertiary">
                        <div class="d-flex gap-1">
                            <form method="GET" action="{{ url_for('user.edit_food_item', id=food.id) }}">
                                <button type="submit" class="btn btn-warning btn-sm">Edit</button>
                            </form>
                            <form method="POST" action="{{ url_for('user.delete_food_item', id=food.id) }}"
                                onsubmit="return confirm('Are you sure you want to delete this item?');">
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endblock%}