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" 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 -->
                    
                    <h1 class="text-center title-font">Add Campground</h1>
                    
                    <div class="form-group">
                        <label class="form-label" for="campgroundName">Name</label>
                        <input class="form-control" type="text" name="name" id="campgroundName" placeholder="Name of the campground" 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="campgroundLocation">Location</label>
                            <input class="form-control <% if(campgroundLocationError.length > 0) { %> is-invalid <% } %>" type="text" name="location" id="campgroundLocation" placeholder="Address or latitude, longitude to display on Google Maps" 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="price" id="price" placeholder="Price in USD" min="0.01" step="0.01">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="campgroundImage">Image Url</label>
                        <input id="image-url-validation" class="form-control" type="text" name="image" id="campgroundImage" placeholder="Paste the website url of the image here" 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>
                        <textarea class="form-control" type="text" name="description" id="description" placeholder="Share your experience!"></textarea>
                    </div>
                    
                    <div class="form-group mt-2">
                        <button id="submit" type="submit" class="btn btn-lg btn-block light-brown text-white w-100" disabled>Add Campground!</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 add" aria-hidden="true"></i> Back</a>
                    
                </form>
                
            </div>
    </div>

</div>

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