<% include ./partials/header %>

 <div class="container">
     <header class="jumbotron">
         <div class="container text-center">
             <h1>Select a Gauge to View Additional Information and Do Something with Notifications and Alerts</h1>
             <p>
                <a class="btn btn-primary btn-large" href="/search">Back To Search</a>
             </p>
         </div>
     </header>


        <div class="album py-3 bg-light">
            <div class="container">

              <div class="row">
                   <% data["features"].forEach(function(icstand){ %>
                <div class="col-md-4 card-group">
                  <div class="card mb-4 shadow-sm">
                    <div class="card-body d-flex flex-column">
                      <p class="card-text">Ice Cream Stand ID - <%= icstand["attributes"]["icstandid"] %></p>
                      <p class="card-text">City- <%= icstand["attributes"]["city"] %></p>
                      <p class="card-text">Location - <%= icstand["attributes"]["location"] %></p>
                      <p class="card-text hide">Flavors - <%= icstand["attributes"]["flavors"] %></p>

                      <div class="d-flex justify-content-between align-items-end mt-auto">
                        <p>
                          <a class="btn btn-primary btn-sm" href="/results/details">View Gauge Details</a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <% }) %>
            </div>
        </div>
        </div>




</div>
<% include ./partials/footer %>