<% layout('layouts/boilerplate')%>
    <link rel="stylesheet" href="../stylesheets/stars.css">
    <div class="row">
        <div class="col-6">
            <div id="holygroundCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <% holyground.images.forEach((img, i)=> { %>
                        <div class="carousel-item <%= i === 0 ? 'active' : ''%>">
                            <img src="<%= img.url%>" class="d-block w-100" alt="">
                        </div>
                        <% }) %>

                </div>
                <% if(holyground.images.length> 1) {%>
                    <a class="carousel-control-prev" href="#holygroundCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#holygroundCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                    <% } %>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <h5 class="card-title">
                        <%= holyground.title%>
                    </h5>
                    <p class="card-text">
                        <%= holyground.description%>
                    </p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item text-muted">
                        <%= holyground.location%>
                    </li>
                    <li class="list-group-item">Submitted by <%= holyground.author.username%>
                    </li>
                    <li class="list-group-item">$<%= holyground.price%>/night</li>
                </ul>
                <% if( currentUser && holyground.author.equals(currentUser._id)) {%>
                    <div class="card-body">
                        <a class="card-link btn btn-info" href="/holygrounds/<%=holyground._id%>/edit">Edit</a>
                        <form class="d-inline" action="/holygrounds/<%=holyground._id%>?_method=DELETE" method="POST">
                            <button class="btn btn-danger">Delete</button>
                        </form>
                    </div>
                    <% } %>
                        <div class="card-footer text-muted">
                            2 days ago
                        </div>
            </div>

        </div>
        <div class="col-6">
            <div id='map'></div>

            <% if(currentUser){ %>
                <h2>Leave a Review</h2>
                <form action="/holygrounds/<%=holyground._id%>/reviews" method="POST" class="mb-3 validated-form"
                    novalidate>
                    <fieldset class="starability-basic">
                        <input type="radio" id="no-rate" class="input-no-rate" name="review[rating]" value="1" checked
                            aria-label="No rating." />
                        <input type="radio" id="first-rate1" name="review[rating]" value="1" />
                        <label for="first-rate1" title="Terrible">1 star</label>
                        <input type="radio" id="first-rate2" name="review[rating]" value="2" />
                        <label for="first-rate2" title="Not good">2 stars</label>
                        <input type="radio" id="first-rate3" name="review[rating]" value="3" />
                        <label for="first-rate3" title="Average">3 stars</label>
                        <input type="radio" id="first-rate4" name="review[rating]" value="4" />
                        <label for="first-rate4" title="Very good">4 stars</label>
                        <input type="radio" id="first-rate5" name="review[rating]" value="5" />
                        <label for="first-rate5" title="Amazing">5 stars</label>
                    </fieldset>
                    <div class="mb-3">
                        <label class="form-label" for="body">Review Text</label>
                        <textarea class="form-control" name="review[body]" id="body" cols="30" rows="3"
                            required></textarea>
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                    </div>
                    <button class="btn btn-success">Submit</button>
                </form>
                <% } %>
                    <% for(let review of holyground.reviews) { %>
                        <div class="card mb-3 ">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <%= review.author.username%>
                                </h5>
                                <p class="starability-result" data-rating="<%=review.rating%>">
                                    Rated: <%= review.rating %> stars
                                </p>
                                <p class="card-text">Review: <%= review.body %>
                                </p>
                                <% if( currentUser && review.author.equals(currentUser._id)) {%>
                                    <form
                                        action="/holygrounds/<%=holyground._id%>/reviews/<%=review._id%>?_method=DELETE"
                                        method="POST">
                                        <button class="btn btn-sm btn-danger">Delete</button>
                                    </form>
                                    <% } %>
                            </div>
                        </div>
                        <% } %>
        </div>
    </div>

    <script>
        const mapToken = '<%-process.env.MAPBOX_TOKEN%>';
        const geometry = '<%-JSON.stringify(holyground.geometry) %>';
        const title = '<%-holyground.title %>';
        const currentLocation = '<%-holyground.location %>';
    </script>

    <script src="/javascripts/showPageMap.js"></script>