<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GhostKitchen App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>
    <main>
        <div class="container">
            <div>
                <h3>
                  GhostKitchen App
                </h3>
              </div>
            <div class="row p-4">
                <div class="col-8 p-4">
                    <div class="display-4">Menu for <%= brands[0].brand_name %></div>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Calories</th>
                                <th scope="col">Price
                                <th>
                            </tr>
                        </thead>
                        <tbody>
                            <% meals.forEach(function (f) {%>
                                <tr>
                                    <td scope="col">
                                        <%= f.meal_name %>
                                    </td>
                                    <td scope="col">
                                        <%= f.meal_desc %>
                                    </td>
                                    <td scope="col">
                                        <%= f.calories%>
                                    </td>
                                    <td scope="col">
                                        $<%= f.price %>
                                    </td>
                                    <td>
                                        <form action="/admin/brands/<%= brands[0].brand_id %>/meals/<%= f._id %>" method="GET">
                                            <!-- <input type="hidden" name="brandID" value="<%= brands[0].brand_id %>"> -->
                                        
                                            <button type="submit" class="btn btn-primary">
                                                UPDATE
                                            </button>
                                        </form>
                                    </td>
                                    <td>
                                        <form action="/admin/meals/delete" method="POST">
                                            <input type="hidden" name="brandID" value="<%= brands[0].brand_id %>">
                                            <input type="hidden" name="mealID" value="<%= f._id %>">
                                            <button type="submit" class="btn btn-danger">
                                                DELETE
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                <% }) %>
                        </tbody>
                    </table>
                </div>
                <!--/.col-8 -->
                <div class="col-4 p-4">
                    <div class="display-4">Create Meal</div>
                    <br/>
                    <form action="/admin/meals/create" method="POST">
                        <input type="hidden" name="brandID" value="<%= brands[0].brand_id %>">
                        <input type="hidden" name="brand_name" value="<%= brands[0].brand_name %>">
                        <div style="font-weight: bold;">
                            <label class="form-label">
                                Meal Name:
                                <input required="true" name="meal_name" type="text" class="form-control" /></label>
                        </div>
                        <div style="font-weight: bold;">
                            <label class="form-label">
                                Description:
                                <input required="true" name="meal_desc" type="text" class="form-control" /></label>
                        </div>
                        <div style="font-weight: bold;">
                            <label class="form-label">
                                Calories:
                                <input required="true" name="calories" type="number" class="form-control" /></label>
                        </div>
                        <div style="font-weight: bold;">
                            <label class="form-label">
                                Price:
                            <input required="true" name="price" type="float" class="form-control" /></label>
                        </div>
                        <button type="submit" class="btn btn-primary">Create</button>
                    </form>
                </div>
                <!-- /.col-4 -->
                <form action="/admin" method="GET">
                    <button type="submit" class="btn btn-primary" style="width: 30%;">
                    Home
                    </button>
                </form>
            </div>
        </div>
    </main>
</body>

</html>
