<!DOCTYPE html>
<html lang="en">
	<head>
		<title>YelpCamp</title>
		
		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    	
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
		<link rel="stylesheet" type="text/css" href="/custom_node_modules/rateyo/min/jquery.rateyo.min.css">
	</head>
    <body>      
        <nav id="navbar" class="navbar navbar-expand-md navbar-light fixed-top">
            <div class="container-fluid">
                <a id="brand" class="navbar-brand" href="/">Yelp Camp</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <hr class="d-block d-md-none">
                            <a class="nav-link" href="/campgrounds">Home</a>
                        </li>
                        <% if(currentUser && currentUser.isAdmin){ %>
                            <li class="nav-item">
                                <a class="nav-link" href="/admin">Admin panel</a>
                            </li>
                         <% } %>                         
                    </ul>
                    <ul class="navbar-nav ml-auto">         
                        <% if(!currentUser){ %>
                            <li class="nav-item">
                                <hr class="d-block d-md-none">
                                <a class="nav-link login-signup" href="/login">Login</a>
                             </li>
                            <li class="nav-item">
                                <a class="nav-link login-signup" href="/register">Sign up</a>
                            </li>
                        <% } else { %>
                            <li class="nav-item">
                                <hr class="d-block d-md-none">
                                <a class="nav-link login-signup" href="/users/<%= currentUser._id %>"><i class="fas fa-user"></i> <%= currentUser.username %></i></a>
                             </li>
                            <li class="nav-item">
                                <a id="red-logout-link" class="nav-link" href="/logout">Logout</a>
                            </li>
                        <% } %>
                    </ul>
                </div>
            </div>
        </nav>
        <% if(error && error.length > 0){ %>
        <div class="container">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <%= error %>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        <% } else if(success && success.length > 0){%>
        <div class="container">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <%= success %>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        <% } %>
        <div class="container">

<header class="jumbotron">
    <div class="container">
        <h1><i class="fas fa-campground"></i> Welcome to YelpCamp!</h1>
        <p>View our hand-picked campgrounds from all over the world!</p>
        <p>
            <a class="btn btn-outline-dark" href="/campgrounds/new">Add new campground!</a>
        </p>
    </div>
</header>

<div id="campgrounds" class="row">
    <div class="col-lg-12">
        <h3>Our campgrounds:</h3>
        <hr>
    </div>
</div>

<div class="row text-center">
    <div class="col-lg-12">
        <form class="form-inline w-auto" action="/campgrounds" method="GET">
            <div class="btn-group w-100">
                <input id="searchString" class="form-control rounded-0 w-75" type="text" name="search" placeholder="Campground search..." max="150" <% if(search){ %>value="<%= search %>%>"<% } %>>
                <input class="btn btn-sm btn-primary" type="submit" value="Search">
            </div>
        </form>
    </div>
</div>

<div class="row text-left mb-5">
    <div class="col-lg-12">
        <a
        type="button"
        class="btn btn-dark btn-sm p-1 px-2 mt-3 form-inline"
        href="/campgrounds?<%=search?`search=${search}&`:''%>sort=name&type=<% if((type == "ascending" && sort == "name") || (!sort && !type)){ %>descending<% } else{ %>ascending<% } %>#campgrounds">
            name<% if(sort == 'name' || !sort){ %>
                <% if(type == 'ascending' || !type){ %>
                    <i class="fas fa-sort-up"></i>
                <% } else if(type == 'descending'){ %>
                    <i class="fas fa-sort-down"></i>
                <% } %>
            <% } %>
        </a>
        <a
        type="button"
        class="btn btn-dark btn-sm p-1 px-2 mt-3 form-inline"
        href="/campgrounds?<%=search?`search=${search}&`:''%>sort=averageRating&type=<% if(type == "ascending" && sort == "averageRating"){ %>descending<% } else{ %>ascending<% } %>#campgrounds">
            rating<% if(sort == 'averageRating'){ %>
                <% if(type == 'ascending'){ %>
                    <i class="fas fa-sort-up"></i>
                <% } else if(type == 'descending'){ %>
                    <i class="fas fa-sort-down"></i>
                <% } %>
            <% } %>
        </a>
        <a
        type="button"
        class="btn btn-dark btn-sm p-1 px-2 mt-3 form-inline"
        href="/campgrounds?<%=search?`search=${search}&`:''%>sort=price&type=<% if(type == "ascending" && sort == "price"){ %>descending<% } else{ %>ascending<% } %>#campgrounds">
            price per night<% if(sort == 'price'){ %>
                <% if(type == 'ascending'){ %>
                    <i class="fas fa-sort-up"></i>
                <% } else if(type == 'descending'){ %>
                    <i class="fas fa-sort-down"></i>
                <% } %>
            <% } %>
        </a>
        <a
        type="button"
        class="btn btn-dark btn-sm p-1 px-2 mt-3 form-inline"
        href="/campgrounds?<%=search?`search=${search}&`:''%>sort=createdAt&type=<% if(type == "ascending" && sort == "createdAt"){ %>descending<% } else{ %>ascending<% } %>#campgrounds">
            creation date<% if(sort == 'createdAt'){ %>
                <% if(type == 'ascending'){ %>
                    <i class="fas fa-sort-up"></i>
                <% } else if(type == 'descending'){ %>
                    <i class="fas fa-sort-down"></i>
                <% } %>
            <% } %>
        </a>
        <a
        type="button"
        class="btn btn-dark btn-sm p-1 px-2 mt-3 form-inline"
        href="/campgrounds?<%=search?`search=${search}&`:''%>sort=location&type=<% if(type == "ascending" && sort == "location"){ %>descending<% } else{ %>ascending<% } %>#campgrounds">
            location<% if(sort == 'location'){ %>
                <% if(type == 'ascending'){ %>
                    <i class="fas fa-sort-up"></i>
                <% } else if(type == 'descending'){ %>
                    <i class="fas fa-sort-down"></i>
                <% } %>
            <% } %>
        </a>
    </div>
</div>

<div class="row text-center">
    <nav class="mr-auto" aria-label="Page navigation">
        <% if (pages && pages > 0) { %>
        <ul class="pagination text-center">
            <% if (current == 1) { %>
            <li class="page-item disabled"><a class="page-link">First</a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds<%if(search || sort){%>?<%}%><%if(search){%>search=<%=search%><%}%><%if(sort){%><%=search?'&':''%>sort=<%=sort%>&type=<%=type%><%}%>#campgrounds">First</a></li>
            <% } %>
     
            <% if (current == 1) { %>
            <li class="page-item disabled"><a class="page-link">«</a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds?page=<%= Number(current) - 1 %><%if(search){%>&search=<%=search%><%}%><%if(sort){%>&sort=<%=sort%>&type=<%=type%><%}%>#campgrounds">«</a></li>
            <% } %>
     
            <% var i = (Number(current) > 5 ? Number(current) - 4 : 1) %>
            <% if (i !== 1) { %>
            <li class="page-item disabled"><a class="page-link">...</a></li>
            <% } %>
            <% for (; i <= (Number(current) + 4) && i <= pages; i++) { %>
            <% if (i == current) { %>
            <li class="page-item active"><a class="page-link"><%= i %></a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds?page=<%= i %><%if(search){%>&search=<%=search%><%}%><%if(sort){%>&sort=<%=sort%>&type=<%=type%><%}%>#campgrounds"><%= i %></a></li>
            <% } %>
            <% if (i == Number(current) + 4 && i < pages) { %>
            <li class="page-item disabled"><a class="page-link">...</a></li>
            <% } %>
            <% } %>
     
            <% if (current == pages) { %>
            <li class="page-item disabled"><a class="page-link">»</a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds?page=<%= Number(current) + 1 %><%if(search){%>&search=<%=search%><%}%><%if(sort){%>&sort=<%=sort%>&type=<%=type%><%}%>#campgrounds">»</a></li>
            <% } %>
     
            <% if (current == pages) { %>
            <li class="page-item disabled"><a class="page-link">Last</a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds?page=<%= pages %><%if(search){%>&search=<%=search%><%}%><%if(sort){%>&sort=<%=sort%>&type=<%=type%><%}%>#campgrounds">Last</a></li>
            <% } %>
        </ul>
        <% } %>
    </nav>
</div>

<div class="card-deck">
<% var flag = false %>
<% campgrounds.forEach(function(campground, index){ %>
<% if(campground.location){flag = true;} %>
<% let x = index + 1 %>
<% if(!campground.isPending){ %>        
    <div class="card shadow mb-4 card-hover" id="card-<%=x%>">
        <div>
            <img class="card-img-top img-fluid" src="<%= campground.image %>" alt="<%= campground.name %> picture" onerror="this.onerror = null; this.src = '/placeholder.jpg'">
            <div class="absolute-overlay p-0 px-2 pt-1 w-100">
                <ul class="p-0 transparent-background d-flex mb-0">
                    <li class="list-group-item mr-auto p-0 border-0 transparent-background mr-auto">
                        <a 
                         class="badge-pill-a badge-card-img"
                         tabindex="0"
                         role="button"
                         data-html="true"
                         data-toggle="popover" 
                         data-trigger="hover"
                         data-placement="top"
                         data-container="body"
                         data-delay='{"show": 100, "hide": 300}'
                         data-content="
                            <p class='mt-1 mb-1'><strong>Location</strong> - <%= campground.location ? campground.location : "not specified" %></p>
                         ">
                            <span class="badge badge-pill badge-light">
                                <% var value = "N/A" %>
                                <% if(campground.location){ %>
                                    <% var latSymbol = Math.sign(campground.lat) == 1 ? '° N' : '° S' %>
                                    <% var lngSymbol = Math.sign(campground.lng) == 1 ? '° E' : '° W' %>
                                    <% value = `${Math.abs(campground.lat).toFixed(1)}${latSymbol}, ${Math.abs(campground.lng).toFixed(1)}${lngSymbol}` %>
                                <% } %>
                                <i class='fas fa-map-marked-alt'></i> <%= value %>
                            </span>
                        </a>
                    </li>
                    <li class="list-group-item ml-auto p-0 border-0 transparent-background ml-auto">
                        <a class="badge-pill-a" href="/campgrounds/<%= campground._id %>#comments"><span class="badge badge-pill badge-primary"><i class="fas fa-comment text-light"></i> <%= campground.comments.length %></span></a>
                    </li>
                </ul>
                <ul class="p-0 transparent-background mb-0">
                    <li class="list-group-item ml-auto p-0 border-0 transparent-background ml-auto">
                        <a 
                         class="badge-pill-a badge-card-img"
                         tabindex="0"
                         role="button"
                         data-html="true"
                         data-toggle="popover" 
                         data-trigger="hover"
                         data-placement="top"
                         data-container="body"
                         data-delay='{"show": 100, "hide": 300}'
                         data-content="
                            <p class='mt-1 mb-1'><strong>Price per night</strong> - <%= campground.price ? '€'+campground.price.toString().substring(0, campground.price.toString().indexOf(".") + 3) : "not specified" %></p>
                         ">
                         <% var price = campground.price.toString() %>
                         <% var indexOfDot =  price.indexOf(".") %>
                            <span class="badge badge-pill badge-light">€<%= campground.price ? (indexOfDot != -1 ? price.substring(0, indexOfDot + 3) : campground.price) : "N/A" %> / <i class="fas fa-moon"></i>
                            </span>
                        </a>
                    </li>
                </ul>
                <ul class="p-0 transparent-background">
                    <li class="list-group-item ml-auto p-0 border-0 transparent-background ml-auto">
                        <a 
                            id="ratingPillPopover-<%= campground._id  %>"
                            class="badge-pill-a badge-card-img"
                            tabindex="0"
                            role="button"
                            data-html="true"
                            data-toggle="popover" 
                            data-trigger="hover"
                            data-placement="top"
                            data-container="body"
                            data-delay='{"show": 100, "hide": 300}'
                            data-content="
                                <p class='mt-1 mb-1'><strong>Rating</strong> - <%= campground.rating.averageRating ? `${campground.rating.averageRating.toFixed(1)} based on ${campground.rating.votesQuantity} ${campground.rating.votesQuantity == 1 ? "vote" : "votes"}` : "no votes yet" %></p>
                         ">
                            <span
                                id="ratingPill-<%= campground._id %>"
                                class="badge badge-pill badge-light"
                                data-votesquantity="<%= campground.rating.votesQuantity %>"
                                data-multipliedratingssum="<%= campground.rating.votes.multipliedRatingsSum %>"
                                data-votes5="<%= campground.rating.votes['5'] %>"
                                data-votes4="<%= campground.rating.votes['4'] %>"
                                data-votes3="<%= campground.rating.votes['3'] %>"
                                data-votes2="<%= campground.rating.votes['2'] %>"
                                data-votes1="<%= campground.rating.votes['1'] %>"
                            >
                                    <i class="fas fa-star"></i> <%= campground.rating.averageRating.toFixed(1) %></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card-header">
            <h5 class="card-title text-center mb-3"><%= campground.name %></h5>
            <ul class="nav nav-tabs card-header-tabs" id="card-nav-tab-<%=x%>" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="card-nav-desc-tab-<%=x%>" data-toggle="tab" href="#card-nav-desc-<%=x%>" role="tab" aria-controls="card-nav-desc-<%=x%>" aria-selected="true">Description</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="card-nav-details-tab-<%=x%>" data-toggle="tab" href="#card-nav-details-<%=x%>" role="tab" aria-controls="card-nav-details-<%=x%>" aria-selected="false">Details</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="card-nav-map-tab-<%=x%>" data-toggle="tab" href="#card-nav-map-<%=x%>" role="tab" aria-controls="card-nav-map-<%=x%>" aria-selected="false" <%if(campground.location){%>onclick="initMap('<%=`map-${x}`%>', <%=campground.lat%>, <%=campground.lng%>, '<%=campground.name%>', '<%=campground.location%>')"<%}%>>Map</a>
                </li>
            </ul>
        </div>
        <div class="card-body pt-3">
            <div class="tab-content" id="card-nav-tabContent-<%=x%>">
                <div class="tab-pane fade show active" id="card-nav-desc-<%=x%>" role="tabpanel" aria-labelledby="card-nav-desc-tab-<%=x%>">
                    <p class="card-text text-justify"><%= (campground.desc && campground.desc.length >= 250) ? campground.desc.substring(0, 250) + "..." : campground.desc %></p>
                </div>
                <div class="tab-pane fade" id="card-nav-details-<%=x%>" role="tabpanel" aria-labelledby="card-nav-details-tab-<%=x%>">
                    <table class="table table-bordered table-striped table-hover w-100 text-left">
                        <tr>
                            <td class="p-1 text-center text-primary border-right-0 align-middle"><i class="fas fa-drafting-compass"></i></td>
                            <td class="p-1 border-left-0 align-middle">Location</td>
                            <td class="p-1 text-center align-middle"><%= campground.location ? campground.location : "N/A" %></td>
                        </tr>
                        <tr>
                            <td class="p-1 text-center text-primary border-right-0 align-middle"><i class="fas fa-arrows-alt-h"></i></td>
                            <td class="p-1 border-left-0 align-middle">Latitude</td>
                            <td class="p-1 text-center align-middle"><%= Math.abs(campground.lat) ? campground.lat.toFixed(2) + latSymbol : "N/A" %></td>
                        </tr>
                        <tr>
                            <td class="p-1 text-center text-primary border-right-0 align-middle"><i class="fas fa-arrows-alt-v"></i></td>
                            <td class="p-1 border-left-0 align-middle">Longitude</td>
                            <td class="p-1 text-center align-middle"><%= Math.abs(campground.lng) ? campground.lng.toFixed(2) + lngSymbol : "N/A" %></td>
                        </tr>
                        <tr>
                            <td class="p-1 text-center text-success border-right-0 align-middle"><i class="fas fa-money-bill"></i></td>
                            <td class="p-1 border-left-0 align-middle">Price per night</td>
                            <td class="p-1 text-center align-middle">€<%= campground.price  %></td>
                        </tr>
                    </table>            
                </div>
                <div class="jumbotron bg-transparent py-2 px-1 mb-0 tab-pane fade" id="card-nav-map-<%=x%>" role="tabpanel" aria-labelledby="card-nav-map-tab-<%=x%>">
                    <%if(campground.location){%>
                    <div id="map-<%=x%>" class="shadow" style="height: 220px;"></div>
                    <%}else{%>
                    <h6>No location was specified for this campground.</h6>
                    <p>Try clicking <a href="http://www.google.com/search?q=<%= campground.name.replace(/\s/g, "+") %>">here</a> to search this campground on google!</p>
                    <%}%>            
                </div>
            </div>
        </div>
        <ul class="list-group list-group-flush">
            <li class="list-group-item text-center border-top-0 pt-1">
                <div class="btn-group">
                    <a type="button" href="/campgrounds/<%=campground._id%>" class="btn btn-primary btn-sm">More Info </a>
                    <% if(currentUser && (campground.author.id.equals(currentUser._id) || currentUser.isAdmin)){ %>
                        <a type="button" href="/campgrounds/<%= campground._id %>/edit" class="btn btn-warning btn-sm">Edit</a>
                        <form class="delete-form btn-group" action="/campgrounds/<%= campground._id %>?_method=DELETE" method="POST">
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    <% } %>
                </div>
            </li>
        </ul>
        <ul id="rating-ul-<%= campground._id %>" class="list-group list-group-flush">
            <li id="rating-li-<%= campground._id %>" class="list-group-item text-center py-1">
                <% if(currentUser) {var condition = currentUser.ratings.filter(el => (String(el._id) === String(campground._id)))[0] ? true : false} %>
                <% if(condition) {var foundCampgroundRating = currentUser.ratings.filter(el => (String(el._id) === String(campground._id)))[0]}%>
                
                <% if(currentUser && !condition){ %>
                
                    <p class="mb-1" style="color: grey">Rate this campground:</p>
                    <div id="stars-<%= campground._id %>" data-campground-id="<%= campground._id %>" class="stars-active mx-auto mt-1 mb-2"></div>
                    
                <% } else if(currentUser && condition){ %>
                
                    <p class="mb-1" style="color: grey">Your rating:</p>
                    <div id="stars-<%= campground._id %>" data-campground-id="<%= campground._id %>" data-rating="<%= foundCampgroundRating.value %>" class="stars-set mx-auto mt-1 mb-2"></div>
                    
                <% } else{%>
                
                    <p class="mb-1 mt-2" style="color: grey"><a href="/login">Log in</a> to submit / see your rating!</p>
                    
                <% } %> 
            </li>
        </ul>
        <div class="card-footer">
            <small class="text-muted"><em><i class="fas fa-clock"></i> added <%= moment(campground.createdAt).fromNow() %> by <a class="text-primary" href="/users/<%=campground.author.id%>"><strong><%= campground.author.username %></strong></a></em></small>    
        </div>          
    </div>
<% } %>
<% }); %>
</div>

<div class="row text-center">
    <nav class="mr-auto" aria-label="Page navigation">
        <% if (pages && pages > 0) { %>
        <ul class="pagination text-center">
            <% if (current == 1) { %>
            <li class="page-item disabled"><a class="page-link">First</a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds<%if(search || sort){%>?<%}%><%if(search){%>search=<%=search%><%}%><%if(sort){%><%=search?'&':''%>sort=<%=sort%>&type=<%=type%><%}%>#campgrounds">First</a></li>
            <% } %>
     
            <% if (current == 1) { %>
            <li class="page-item disabled"><a class="page-link">«</a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds?page=<%= Number(current) - 1 %><%if(search){%>&search=<%=search%><%}%><%if(sort){%>&sort=<%=sort%>&type=<%=type%><%}%>#campgrounds">«</a></li>
            <% } %>
     
            <% var i = (Number(current) > 5 ? Number(current) - 4 : 1) %>
            <% if (i !== 1) { %>
            <li class="page-item disabled"><a class="page-link">...</a></li>
            <% } %>
            <% for (; i <= (Number(current) + 4) && i <= pages; i++) { %>
            <% if (i == current) { %>
            <li class="page-item active"><a class="page-link"><%= i %></a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds?page=<%= i %><%if(search){%>&search=<%=search%><%}%><%if(sort){%>&sort=<%=sort%>&type=<%=type%><%}%>#campgrounds"><%= i %></a></li>
            <% } %>
            <% if (i == Number(current) + 4 && i < pages) { %>
            <li class="page-item disabled"><a class="page-link">...</a></li>
            <% } %>
            <% } %>
     
            <% if (current == pages) { %>
            <li class="page-item disabled"><a class="page-link">»</a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds?page=<%= Number(current) + 1 %><%if(search){%>&search=<%=search%><%}%><%if(sort){%>&sort=<%=sort%>&type=<%=type%><%}%>#campgrounds">»</a></li>
            <% } %>
     
            <% if (current == pages) { %>
            <li class="page-item disabled"><a class="page-link">Last</a></li>
            <% } else { %>
            <li class="page-item"><a class="page-link" href="/campgrounds?page=<%= pages %><%if(search){%>&search=<%=search%><%}%><%if(sort){%>&sort=<%=sort%>&type=<%=type%><%}%>#campgrounds">Last</a></li>
            <% } %>
        </ul>
        <% } %>
    </nav>
</div>

<% if(flag){ %>
    <script>
        function initMap(id, latitude, longitude, name, location) {
            var element = document.getElementById(id);
            if(!element.classList.contains('generated')){
                var lat = latitude;
                var lng = longitude;
                var center = {lat: lat, lng: lng };
                var map = new google.maps.Map(element, {
                    zoom: 4,
                    center: center,
                    scrollwheel: false,
                    streetViewControl: false,
                    mapTypeControl: false,
                    scrollable: true,
                    gestureHandling: 'cooperative'
                });
                var contentString = `
                    <strong>${name}</strong><br /><br />
                    <strong>${location}</strong>
                `
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                var marker = new google.maps.Marker({
                    position: center,
                    map: map
                });
                marker.addListener('click', function() {
                    infowindow.open(map, marker);
                });

                element.classList.add('generated');
            }            
        }
    </script>
    <script async defer src='https://maps.googleapis.com/maps/api/js?key=<%= process.env.GEOCODER_API_KEY %>'></script>
<% } %>

    </div><!-- /.container -->
    <footer id="footer" class="footer navbar-expand-md justify-content-center">
			<div class="footer-copyright text-center py-3">
				<p class="mb-0 mt-0"><a id="footer-campground-name" style="color: #124EC1" href="/">Yelp Camp</a> ©<%= moment().year() %></p>
				<p class="mb-0 mt-0">
					<a href="https://www.linkedin.com/in/jakub-wisniowski/">
	    			    <strong style="font-size: 14px">
	    				    <span style="color: #124EC1">createdBy</span><span style="color: #CE3021">:</span> 
	    				    <span style="color: green">"Jakub Wiśniowski"</span><span style="color: #CE3021">;</span>
	    			    </strong>
				    </a>
				</p>
            </div>
    </footer>
    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script rel="script" type="text/javascript" src="/custom_node_modules/rateyo/src/jquery.rateyo.js"></script>     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="/scripts/scripts.js"></script>
    <script src="/scripts/setUpRatingStars.js"></script>
    <script type="text/javascript">        
        $(document).ready(() => {
            if($('#searchString').val()){
                var temp = document.getElementById("campgrounds");
                temp.scrollIntoView();
            }
        });
    </script>
    
    </body>
</html>
