<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS STYLE SHEET -->
    <link rel="stylesheet" href="/public/css/style.css">
    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <!-- MAIN FONT -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap" rel="stylesheet">
    <title>Edits</title>
</head>
<body>

    <%- include('./partials/nav.ejs')%>
    
    <div class="container">

        <div class="side"></div>
        <div class="comment">
            <h1>EDIT COMMENT</h1>
            <form method="POST" action="/comments/<%= comment._id %>?_method=PUT">
            <fieldset class="info">
                <legend>NAME & COMMENT</legend>
                <label for="Name">NAME</label>
                <input id="name" type="text" name="name" required>
                <label for="comment">COMMENT</label>
                <textarea rows="6" cols="34" id="comment" name="comment"></textarea>
                <!-- <label for="beenHereBefore">Been here before?</label>
                <input type="checkbox" name="beenHereBefore"> -->
            </fieldset>

            <fieldset class="city">
                <legend>CITY</legend>
                <label for="cityChoice"></label>
                <select name="city" id="select">
                    <option value="Atlanta">Atlanta</option>
                    <option value="Detroit">Detroit</option>
                    <option value="New York">New York</option>
                    <option value="Tampa">Tampa</option>
                </select>
            </fieldset>
            <input type="submit" value="EDIT COMMENT">
        </form>
        <form method="POST" action="/comments/<%=comment._id%>?_method=DELETE">
            <input type="submit" value="DELETE">
        </form>
    </div>
    </div>

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

    <style>
        * {
            font-family: 'Sedgwick Ave', cursive;
            color: #317773;
            background-color: #E2D1F9;
        }

        .container {
            width: 80vw;
            height: 70vw;
            margin: 50px auto;
            display: flex;
            border-radius: 10px;
            background-color: white;
        }

        .side {
            width: 50%;
            background: url('https://img.wallpapersafari.com/phone/640/1136/19/41/tWH8jq.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            border-radius: 10px 0 0 10px;
            border: 2px solid #317773;
            box-shadow: 5px 5px 50px #E2D1F9;
        }

        .comment {
            width: 50%;
            background: #E2D1F9;
            border-radius: 0 10px 10px 0;
            padding: 15px;
            box-sizing: border-box;
            overflow: auto; 
            border: 2px solid #317773;
            box-shadow: 5px 5px 50px #E2D1F9;
        }

        h1 {
            font-family: 'Sedgwick Ave', cursive;
            font-weight: 500;
            color: #317773;
        }

        fieldset {
            border: 2px solid #317773;
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
        }

        legend {
            padding: 0px 10px;
            font-family: 'Sedgwick Ave', cursive;
            font-weight: 500;
            color: #317773;
        }

        label {
            font-family: 'Sedgwick Ave', cursive;
            font-weight: 200;
            color: #317773;
            display: block;
        }

        textarea {
            resize: none;
            height: 75px;
        }
        
        input, textarea {
            width: 100%;
            margin: 10px 0;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            border: 1px solid #317773;
        }

        input:focus {
            outline: 0;
            border: 1px solid #317773;
        }

        input[type="submit"] {
            width: 100%;
            height: 50px;
            background: white;
            box-shadow: 2px 2px #317773;
            font-family: 'Sedgwick Ave', cursive;
            font-size: 1.3em;
            color: #317773;
            border: 0px;
            transition: 0.2s ease-in-out;
        }

        input[type="submit"]:hover {
            cursor: pointer;
            background: #317773;
            color: white;
            box-shadow: 2px 2px white;
        }

        #select {
            width: 100%;
            border-radius: 10px;
        }

        @media only screen and (max-width: 825px) {
            .car-art {
                display: none;
            }

            .airplane-art {
                display: none;
            }   
        }
    </style>

    <!-- <h1>Comments Edit Page</h1>

    <form method="POST" action="/comments/<%= comment._id %>?_method=PUT">
        <legend>
            <label for="Name">
                Name: <br/>
                <input id="name" type="text" value="<%= comment.name%>" name="name" required placeholder="edit your name here">
            </label>
            <br/><br/>
        </legend>
        <legend>
            <label for="comment">
                Comment: <br/>
            <textarea rows="6" cols="60"id="comment" value="<%=comment.comment%> "name="comment"></textarea>
        </legend>
        <h2>Select A City</h2>
        <div class="select">
            <select name="city" id="select">
                <% if(comment.city === 'Atlanta') { %>
                    <option value="Atlanta">Atlanta</option>
                <% } else if(comment.city === 'Detroit') { %>
                    <option value="Detroit">Detroit</option>
                <% } else if(comment.city === 'New York') { %>
                    <option value="New York">New York</option>
                <% } else { %>
                    <option value="Tampa">Tampa</option>
                <% } %>
            </select>
        </div>
        <h2>Have you been here before: <input type="checkbox" name="beenHereBefore" 
            <% if(comment.beenHereBefore === true) { %>
                checked
            <% } %>
            ></h2>
        
        <input type="submit" value="Edit comment">
    </form> -->
</body>
</html>