<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('partials/head') %> 
</head>
<body>
    <%- include('partials/navbar') %>
    <section id="find-food">
        <div class="container">
            <h2>Find Food Nearby</h2>
            <form>
                <div class="form-group">
                    <label for="location">Location:</label>
                    <input type="text" class="form-control" id="location" placeholder="Enter location">
                </div>
                <button type="submit" class="btn btn-primary">Search</button>
            </form>
            <div id="results">
                <!-- Results will be displayed here -->
            </div>     
        </div>

        <div class="container mt-5">
            <div class="row">
              <% cards.forEach(card => { %>
                <div class="col-md-4 mb-4">
                  <div class="card">
                    <img src="<%= card.image %>" class="card-img-top" alt="<%= card.title %> Image" height="300px" width="300px">
                    <div class="card-body">
                      <h5 class="card-title"><%= card.title %></h5>
                      <p class="card-text"><%= card.location %></p>
                      <p class="card-text"><%= card.description %></p>
                    </div>
                  </div>
                </div>
              <% }); %>
            </div>
          </div>
    </section>
    <script>

    </script>
</body>
</html>