foodplanner/templates/modals/edit_tracked_meal.html

<!-- Edit Tracked Meal Modal -->
<div class="modal fade" id="editTrackedMealModal" tabindex="-1" aria-labelledby="editTrackedMealModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTrackedMealModalLabel">Edit Tracked Meal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editTrackedMealId" value="">
                <div id="editMealFoodsList">
                    <!-- Foods will be loaded here -->
                </div>
                <div class="mt-3">
                    <button class="btn btn-outline-primary" onclick="addFoodToTrackedMeal()">
                        <i class="bi bi-plus"></i> Add Food
                    </button>
                </div>
            </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="saveTrackedMeal()">Save Changes</button>
                <button type="button" class="btn btn-success" onclick="saveAsNewMeal()">Save as New Meal</button>
            </div>
        </div>
    </div>
</div>