JacobGrisham/YelpCamp

<%- include ("../partials/parallax-main") %>
<%- include ("../partials/nav") %>

<div class="container">
    <div class="row pt-5 justify-content-around">
        <div id="campground-index-description" class="col-6 park-sign-svg default-park-sign-size p-5">
            <h1 class="logo">Welcome to <span class="logo-md">YelpCamp</span>!</h1>
            <p class="title-font ps-4" style="line-height: 1; margin-top: 2.4rem;">Upload your favorite campgrounds, rate the ones you've visited, and engage the community with comments.</p>
        </div>
        <div class="col-6 park-sign-svg default-park-sign-size d-flex flex-column justify-content-evenly px-5 pb-2">
            <form action="/campgrounds" method="GET" class="form-inline">
                <div class="form-group">
                    <input type="text" name="search" placeholder="Search" class="form-control py-2 fs-4 title-font">
                </div>
            </form>
            <a href="/campgrounds/new" class="btn light-brown title-font fs-4 text-white ms-3 rounded-pill"><i class="fa fa-plus-circle add" aria-hidden="true"></i> Campground </a>
        </div>
    </div>

    <div class="row text-center justify-content-around" id="campground-listings">
        <div col-md-12>
            <% if(noMatch !== null) { %>
            <h2><%= noMatch %></h2>
            <% } %>
        </div>
        <% campgrounds.forEach(function(campground){ %>
            <div class="col-lg-5 col-md-7 mb-5">
                <div class="card campgrounds-card rounded" style="z-index: 2;">
                    <a href="/campgrounds/<%= campground._id %>">
                        <div class="photo-link rounded-top">
                            <img data-src="<%= campground.image %>" class="campgrounds-image" alt="<%= campground.name %>" />
                        </div>
                    </a>
                    <div class="card-body campgrounds-card-body p-4">
                        <h2 class="title-font mb-4"><%= campground.name %></h2>
                        <% if (campground.rating === 0) { %>
                            
                        <% } else { %>
                            <span class="fa fa-star bg-warning rounded-pill p-1 checked"></span>
                            <span class="fa fa-star bg-warning rounded-pill p-1 <% if (campground.rating > 1.5) { %> checked <% } else { %> transparent <% } %>"></span>
                            <span class="fa fa-star bg-warning rounded-pill p-1 <% if (campground.rating > 2.5) { %> checked <% } else { %> transparent <% } %>"></span>
                            <span class="fa fa-star bg-warning rounded-pill p-1 <% if (campground.rating > 3.5) { %> checked <% } else { %> transparent <% } %>"></span>
                            <span class="fa fa-star bg-warning rounded-pill p-1 <% if (campground.rating > 4.5) { %> checked <% } else { %> transparent <% } %>"></span>
                        <% } %>
                        <p class="mt-1"><%= campground.reviews.length %> reviews</p>
                    </div>
                </div>
            </div>
        <% }); %>
    </div>
</div>

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