<% layout('layouts/boilerplate') %>
<div class="shadow-md">
    <div id="cluster-map" class="mb-3"></div>
</div>
<div class="row">
    <div class="col-6">
        <h2 class="my-3">All Campgrounds</h2>
    </div>
    <div class="col-6">
        <div class="d-flex justify-content-end my-3 ">
            <form action="/campgrounds" method="get">
              <div class="input-group">
                <input
                  type="text"
                  name="search"
                  class="form-control-sm"
                  placeholder="Search for campgrounds"
                  aria-label="Search for campgrounds"
                  aria-describedby="button-addon2"
                />
                <button class="btn btn-sm btn-outline-success" type="submit" id="button-addon2">
                  <i class="fa fa-search" aria-hidden="true" style="font-size: 22px;"></i>
                  <span class="h5" style="font-size: 1.15rem;">Search</span>
                </button>
              </div>
            </form>
          </div>
        </div>
          <% if(nomatch !== null) {%>
          <div class="alert alert-danger" role="alert">
            <h4 class="alert-heading">No Match Found!</h4>
            <p>Sorry, we couldn't find any hotels matching your search.</p>
            <hr />
            <p class="mb-0">Please try again with some different keywords.</p>
          </div>
          <% } else {%>
    
</div>


<% for(let campground of campgrounds){ %>
    <div class="card mb-3">
        <div class="row">
            <div class="col-md-4">
                <% if(campground.images.length >= 1) { %>
                <img class="img-fluid" style="border-top-left-radius: 5px ; border-bottom-left-radius: 5px ;" src="<%= campground.images[0].url %>">
                <% } else { %>
                <img class="img-fluid" style="border-top-left-radius: 5px ; border-bottom-left-radius: 5px ;" src="/assets/travel-scout-img.png">
                <% } %>

            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title"><%= campground.title %></h5>
                    <p class="card-text"><%= campground.description %></p>
                    <p class="card-text">
                        <small class="text-muted"><%= campground.location %></small>
                    </p>

                    <a class="btn btn-primary" href="/campgrounds/<%= campground._id%>">View <%= campground.title %></a>
                </div>
            </div>
        </div>
    </div>
    
<% } %>
<% } %>

<script>
    const mapToken = '<%=process.env.MAPBOX_TOKEN%>'; 
    const campgrounds = {features: <%-JSON.stringify(campgrounds)%>} ;
</script>

<script src="/js/clusterMap.js"></script>