JacobGrisham/YelpCamp

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

<div class="container my-5">
    <div class="row">
        <div class="col-md-12 dark-brown p-3">
            <h1 class="text-center title-font">Review Page: <%= campground.name %></h1>
            <div class="thumbnail">
                <div class="caption-full">
                    <% if (campground.rating === 0) { %>
                    <h2><em>Be the first to write a review!</em></h2>
                    <% } else { %>
                    <p>
                        <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>
                        <em>(total reviews: <%= campground.reviews.length %>)</em>
                    </p>
                    <p>
                        Current campground rating: <strong><%= campground.rating.toFixed(2) %></strong>
                    </p>
                    <p><h2>All reviews for this campground:</h2></p>
                    <hr class="mt-0">
                    <div>
                        <a class="btn light-brown text-white <% if (currentUser && campground.reviews.some(function (review)
                        {return review.author.id.equals(currentUser._id)})) { %> disabled <% } %>" href="/campgrounds/<%= campground._id %>/reviews/new">
                        Add Review <i class="fa fa-pencil add" aria-hidden="true"></i>
                        </a>
                    </div>
                    <hr>
                    <% campground.reviews.forEach(function(review){ %>
                    <div class="row">
                        <div class="col-md-3">
                            <%- '<span class="fa fa-star bg-warning rounded-pill p-1 checked"></span>'.repeat(review.rating) %><%- '<span class="fa fa-star transparent"></span>'.repeat(5 - review.rating) %>
                            <div>Review by: <strong><%= review.author.username %></strong></div>
                            <span><em><%= moment(review.createdAt).fromNow() %></em></span>
                        </div>
                        <div class="col-md-9">
                            <p style="text-align: justify; word-wrap: break-word;">
                                <%= review.text %>
                            </p>
                        <div class="float-right d-inline-flex">
                            <% if(currentUser && review.author.id.equals(currentUser._id)){ %>
                                <a class="btn btn-xs btn-outline-warning mr-2"
                                href="/campgrounds/<%=campground._id %>/reviews/<%=review._id %>/edit">Edit</a>
                                <form id="delete-form" action="/campgrounds/<%=campground._id %>/reviews/<%=review._id %>?_method=DELETE" method="POST">
                                    <input type="submit" class="btn btn-xs btn-outline-danger delete-button" value="Delete">
                                </form>
                            <% } %>
                        </div>
                        </div>
                    </div>
                    <hr>
                    <% }); %>
                    <% } %>
                    <div style="margin-top: 10px;">
                        <a class="link-light" href="/campgrounds/<%= campground._id %>"><i class="fa fa-angle-left back" aria-hidden="true"></i> Back</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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