{% extends "base.html" %}
{% block content %}
<div class="row">
    <div class="col-md-4">
        <h3>Add New Food</h3>
        <form action="/foods/add" method="post">
            <div class="mb-3">
                <label class="form-label">Name</label>
                <input type="text" class="form-control" name="name" required>
            </div>
            <div class="row">
                <div class="col-6">
                    <label class="form-label">Serving Size</label>
                    <input type="text" class="form-control" name="serving_size" required>
                </div>
                <div class="col-6">
                    <label class="form-label">Unit</label>
                    <input type="text" class="form-control" name="serving_unit" required>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-6">
                    <label class="form-label">Calories</label>
                    <input type="number" step="0.1" class="form-control" name="calories" required>
                </div>
                <div class="col-6">
                    <label class="form-label">Protein (g)</label>
                    <input type="number" step="0.1" class="form-control" name="protein" required>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-6">
                    <label class="form-label">Carbs (g)</label>
                    <input type="number" step="0.1" class="form-control" name="carbs" required>
                </div>
                <div class="col-6">
                    <label class="form-label">Fat (g)</label>
                    <input type="number" step="0.1" class="form-control" name="fat" required>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-6">
                    <label class="form-label">Fiber (g)</label>
                    <input type="number" step="0.1" class="form-control" name="fiber" value="0">
                </div>
                <div class="col-6">
                    <label class="form-label">Sugar (g)</label>
                    <input type="number" step="0.1" class="form-control" name="sugar" value="0">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-6">
                    <label class="form-label">Sodium (mg)</label>
                    <input type="number" step="0.1" class="form-control" name="sodium" value="0">
                </div>
                <div class="col-6">
                    <label class="form-label">Calcium (mg)</label>
                    <input type="number" step="0.1" class="form-control" name="calcium" value="0">
                </div>
            </div>
            <button type="submit" class="btn btn-primary mt-3">Add Food</button>
        </form>
    </div>
    
    <div class="col-md-8">
        <h3>Foods Database</h3>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Serving</th>
                        <th>Cal</th>
                        <th>Protein</th>
                        <th>Carbs</th>
                        <th>Fat</th>
                        <th>Fiber</th>
                        <th>Sodium</th>
                        <th>Calcium</th>
                    </tr>
                </thead>
                <tbody>
                    {% for food in foods %}
                    <tr>
                        <td>{{ food.name }}</td>
                        <td>{{ food.serving_size }} {{ food.serving_unit }}</td>
                        <td>{{ "%.1f"|format(food.calories) }}</td>
                        <td>{{ "%.1f"|format(food.protein) }}g</td>
                        <td>{{ "%.1f"|format(food.carbs) }}g</td>
                        <td>{{ "%.1f"|format(food.fat) }}g</td>
                        <td>{{ "%.1f"|format(food.fiber) }}g</td>
                        <td>{{ "%.1f"|format(food.sodium) }}mg</td>
                        <td>{{ "%.1f"|format(food.calcium) }}mg</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}