<!-- Edit listing information -->
<!-- Notes:
    Form to edit listing information
    Form should be pre-populated with existing information
    Form should have a link to delete the listing
    Form should have a link to cancel editing
    Form could have a link to preview the listing
-->

<%- include('../partials/header') %>
<%- include('../partials/nav') %>

<div class="edit container">
    <div class="row-auto my-4 text-center">
        <h1 class="title"><%= title %> </h1>
    </div>
    <div class="row mx-5">
        <form action="/listings/<%= listing.id %>?_method=PUT" method="POST">
            <div class="row mb-2">
                <div class="col"></div>
                <div class="col-6">
                    <label for="title" class="form-label">Title</label>
                    <input type="text" class="form-control" id="title" name="title" value="<%= listing.title %>">
                </div>
                <div class="col"></div>
            </div>
            <div class="row mb-2">
                <div class="col"></div>
                <div class="col-6">
                    <label for="subtitle" class="form-label">Subtitle</label>
                    <input type="text" class="form-control" id="subtitle" name="subtitle" value="<%= listing.subtitle %>">
                </div>
                <div class="col"></div>
            </div>
            <div class="row mb-2">
                <div class="col"></div>
                <div class="col-6">
                    <label for="description" class="form-label">Description</label>
                    <textarea class="form-control" id="description" name="description" rows="3"><%= listing.description %></textarea>
                </div>
                <div class="col"></div>
            </div>
            <div class="row mb-2">
                <div class="col"></div>
                <div class="col-6">
                    <label for="phone" class="form-label col-2">Phone</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-telephone-fill"></i></span>
                        <input type="text" class="form-control" name="phoneNumber" placeholder="Enter name" value="<%= listing.phoneNumber %>">
                    </div>
                </div>
                <div class="col"></div>
            </div> 
            <div class="row justify-content-center my-4">
                <input type="submit" class="btn btn-primary col-4" value="Save">
            </div>
        </form>
    </div>
</div>

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