{{/*
    browse-meals.html contains the list of meals page.
*/}}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Browse Meals :: Meal Planner</title>
        
        {{template "common-head.html"}}
        
        <script type="text/javascript">
            $(document).ready(function() {
                $("#add-meal").click(function() {
                    location.href = "/meals/new";
                });
                
                MPAjax.fetchMealList(function(meals) {
                    MPUtil.renderMealList(meals, $("#container"));
                });
            });
        </script>
    </head>
    
    <body>
        <div class="container">
            <div class="page-header">
                <div class="row">
                    <div class="col-md-8">
                        <h1>Browse Meals</h1>
                    </div>
                    <div class="col-md-4">
                        <button class="header-button" id="add-meal">
                            <img src="/static/icons/add-meal_32x32.png" height="24" alt=""/>
                            Add new meal
                        </button>
                    </div>
                </div>
            </div>
            
            <div id="results">
                Loading results...
            </div>
        </div>
    </body>
</html>

{{/*
    browse-meals.html contains the list of meals page.
*/}}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Browse Meals :: Meal Planner</title>
        
        {{template "common-head.html"}}
        
        <script type="text/javascript">
            $(document).ready(function() {
                $("#add-meal").click(function() {
                    location.href = "/meals/new";
                });
                
                MPAjax.fetchMealList(function(meals) {
                    MPUtil.renderMealList(meals, $("#results"));
                });
            });
        </script>
    </head>
    
    <body>
        <div class="container">
            <div class="page-header">
                <div class="row">
                    <div class="col-md-8">
                        <h1>Browse Meals</h1>
                    </div>
                    <div class="col-md-4">
                        <button class="header-button" id="add-meal">
                            <img src="/static/icons/add-meal_32x32.png" height="24" alt=""/>
                            Add new meal
                        </button>
                    </div>
                </div>
            </div>
            
            <div id="results">
                <img src="/static/icons/loading.gif" alt=""/>
                Loading results...
            </div>
        </div>
    </body>
</html>

Fix meal list results being added to a nonexistent container element
Fix meal list results being added to a nonexistent container element
