{% extends "base.html" %}

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

{% block content %}
<div class="container 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>Fats (g)</th>
                    <th>Saturated Fats (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_100g }}</td>
                    <td class="bg-body-tertiary">{{ food.fats_100g }}</td>
                    <td class="bg-body-tertiary">{{ food.saturated_fats_100g }}</td>
                    <td class="bg-body-tertiary">{{ food.sugar_100g }}</td>
                    <td class="bg-body-tertiary">{{ food.carbs_100g }}</td>
                    <td class="bg-body-tertiary">{{ food.protein_100g }}</td>
                    <td class="bg-body-tertiary">
                        <form method="POST" action="{{ url_for('admin.delete_food', 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>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% endblock%}