foodplanner/templates/modals/add_from_open_food_facts.html

<!-- Add from Open Food Facts Modal -->
<div class="modal fade" id="addFromOpenFoodFactsModal" tabindex="-1" aria-labelledby="addFromOpenFoodFactsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addFromOpenFoodFactsModalLabel">Add Food from Open Food Facts</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Search Bar -->
                <div class="input-group mb-3">
                    <input type="text" class="form-control" name="openfoodfacts_query" placeholder="Search for a food...">
                    <button class="btn btn-outline-secondary" type="button" onclick="searchOpenFoodFacts()">Search</button>
                </div>

                <!-- Search Results -->
                <div id="openFoodFactsResults" class="list-group" style="max-height: 300px; overflow-y: auto;">
                    <!-- Results will be populated here -->
                </div>

                <hr>

                <!-- Food Form -->
                <form id="addOpenFoodFactsForm" action="/foods/add_openfoodfacts" method="post">
                    <input type="hidden" name="openfoodfacts_id">
                    <div class="row">
                        <div class="col-8 mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="col-4 mb-3">
                            <label class="form-label">Brand</label>
                            <input type="text" class="form-control" name="brand" placeholder="Optional">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Serving Size</label>
                            <input type="text" class="form-control" name="serving_size" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Unit</label>
                            <input type="text" class="form-control" name="serving_unit" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Calories</label>
                            <input type="number" step="0.1" class="form-control" name="calories" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Protein (g)</label>
                            <input type="number" step="0.1" class="form-control" name="protein" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Carbs (g)</label>
                            <input type="number" step="0.1" class="form-control" name="carbs" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Fat (g)</label>
                            <input type="number" step="0.1" class="form-control" name="fat" required>
                        </div>
                    </div>
                     <div class="row">
                        <div class="col-6 mb-3">
                            <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 mb-3">
                            <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">
                        <div class="col-6 mb-3">
                            <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 mb-3">
                            <label class="form-label">Calcium (mg)</label>
                            <input type="number" step="0.1" class="form-control" name="calcium" value="0">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitOpenFoodFactsForm()">Add Food</button>
            </div>
        </div>
    </div>
</div>