<%- include("../partials/header") %>
<div class="container">
	<header class="jumbotron">
		<div class="container">
			<h1>
				Welcome to YelpCamp!
			</h1>
			<p>
				View our hand-picked campsites from all over the world.
			</p>
			<p>
				<a href="/campgrounds/new" class="btn btn-success btn-lg">Add new Campgrounds</a>
			</p>
		</div>
	</header>
	<div class="row">
		<div class="col-lg-12">
			<h3>
				Our most popular Campgrounds!
			</h3>
		</div>
	</div>
	<div class="row text-center" style="display:flex; flex-wrap:wrap;">
		<% campgrounds.forEach(function(campground){ %>
		<div class="col-md-3 col-sm-6">
			<div class="thumbnail">
				<img src="<%= campground.image %>">
				<div class="caption">
					<h4>
						<%= campground.name %>
					</h4>
				</div>
				<p>
					<a href="/campgrounds/<%= campground._id %>" class="btn btn-primary">More Info</a>
				</p>
			</div>
		</div>
		<% }); %>
	</div>
</div>

<%- include("../partials/footer") %>