JacobGrisham/YelpCamp

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

<div class="container">
    <div class="row justify-content-center">
            <div class="col-12 col-md-9">
                
                <form id="javascript-validation" class="new-edit-forms dark-brown" novalidate action="/campgrounds/<%= campground._id %>?_method=PUT" method="POST">
                    <!-- Note that the action="__" should equal the name of the post request url. -->
                    <!-- We use the name attribute in our route to grab the data from our request.body -->
                    
                    <h2 class="text-center title-font">Edit <%= campground.name %></h2>
                    
                    <div class="form-group">
                        <label class="form-label" for="name">Name</label>
                        <input class="form-control" type="text" name="campground[name]" id="name" value="<%= campground.name %>" required autofocus>
                        <div class="valid-feedback"></div>
                        <div class="invalid-feedback">
                            Please provide name of the campground.
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="location">Location</label>
                            <input class="form-control <% if(campgroundLocationError) { %> is-invalid <% } %>" type="text" name="location" id="location" value="<%= campground.location %>" required>
                        <% if(campgroundLocationError) { %>
                        <div class="invalid-feedback">
                            <%= campgroundLocationError %>
                        </div>
                        <% } %>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="price">Price</label>
                        <input class="form-control" type="number" name="campground[price]" id="price" value="<%= campground.price %>">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="image">Image Url</label>
                        <input id="image-url-validation" class="form-control" type="text" name="campground[image]" id="image" value="<%= campground.image %>" required>
                        <div class="valid-feedback"></div>
                        <div class="invalid-feedback">
                            Please provide photo of the campground by selecting a URL with ".jpg" at the end
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="description">Description</label>
                        <input class="form-control" type="text" id="description" name="campground[description]" value="<%= campground.description %>"></input>
                    </div>
                
                    <div class="form-group mt-2">
                        <button class="btn btn-lg light-brown text-white btn-block w-100">Update!</button>
                    </div>
                
                    <a href="/campgrounds" class="mr-4 btn btn-sm light-brown text-white mt-4"><i class="fa fa-angle-left text-white" aria-hidden="true"></i> Back</a>
                
                </form>
            </div>
    </div>

</div>

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