<% layout('layouts/boilerplate') %>
<link rel="stylesheet" href="/css/stars.css">

<!-- campground card -->
<div class="row">
  <div class="col-6">

    <div id="campgroundCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
      <% if(campground.images.length === 0 || !campground.images) {%>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="/assets/travel-scout-img.png" class="d-block w-100" alt="">
          </div>
        </div>
        <% } else{ %>
      <div class="carousel-inner">
        <% campground.images.forEach((img , i) =>{ %>
        <div class="carousel-item <%= i === 0 ? 'active' : '' %>">
          <img src="<%= img.url %>" class="d-block w-100" alt="">
        </div>
        <% }) %> 
      </div>
      <% } %>
      <% if(campground.images.length > 1) {%>
      <button class="carousel-control-prev" type="button" data-bs-target="#campgroundCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#campgroundCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      <% } %>
    </div>
    <div class="card mb-3">      
      <div class="card-body">
        <h5 class="card-title"><%= campground.title %></h5>
        <p class="card-text"><%= campground.description %></p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item text-muted"><%= campground.location %></li>
        <li class="list-group-item">Submitted by: <%= campground.author.username %></li>
        <li class="list-group-item">$<%= campground.price %> / night</li>
      </ul>
      <% if(currentUser && campground.author.equals(currentUser._id)) {%>
      <div class="card-body">
        <a
          class="card-link btn btn-warning"
          href="/campgrounds/<%= campground._id %>/edit"
          >Edit</a
        >
        <form
          class="d-inline"
          action="/campgrounds/<%= campground._id %>?_method=DELETE"
          method="POST"
        >
          <button class="btn btn-danger">Delete</button>
        </form>
      </div>
      <% } %>
    </div>
  </div>

  <!-- review -->
  <div class="col-6">

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">Find on map:</h5>
        <div id="map"></div>
      </div>
    </div>
    <% if(currentUser) { %>
    <h2>Leave a review:</h2>
    <form
      action="/campgrounds/<%= campground._id%>/reviews"
      method="POST"
      class="mb-4 validated-form"
      novalidate
    >
      <!-- <div class="mb-3">
        <label class="form-label" for="rating">Rating</label>
        <input
          class="form-range"
          type="range"
          min="1"
          max="5"
          name="review[rating]"
          id="rating"
        />
      </div> -->
      <fieldset class="starability-heart">
        <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</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>
    <% } %>

    <h3>Previous Reviews:</h3>
    <% for(let review of campground.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.body %></p>
        <% if(currentUser && review.author.equals(currentUser._id)) {%>
        <form action="/campgrounds/<%= campground._id %>/reviews/<%= review._id %>?_method=DELETE" method="POST">
          <button class="btn btn-sm btn-outline-danger">Delete</button>
        </form> 
        <% } %>
      </div>
    </div>
    <% } %>
  </div>
</div>

<script>
  const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
  const campground = <%-JSON.stringify(campground)%> ;
</script> 

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