<!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">
    <title>NYC Comments</title>
</head>
<body>
    <nav>
        <%- include('./partials/nav.ejs')%>
    </nav>
    <img class="logo" src="https://images.unsplash.com/photo-1643574190467-7913725e58b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1277&q=80" alt="">
    <br>
    <a class="create" href="/comments/new">Create A New Comment Here!</a>
    <section class="container">
        <% for (let i=0; i<comment.length;i++){ %>
            <p class="name"><%= comment[i].name%></p>
            <p><%= comment[i].comment%></p>
            <form class="comment-button" action="/comments/<%=comment[i]._id%>/edit">
                <input class="button" type="submit" value="Edit <%=comment[i].name%>">
            </form>
            <form class="comment-button" action="/comments/<%=comment[i]._id%>?_method=DELETE" method="POST">
                <input class="button" type="submit" value="Delete <%=comment[i].name%>">
            </form>
        <% } %>
    </section>
    <footer>
        <%- include('./partials/footer.ejs')%>
    </footer>
</body>
</html>
<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Advent Pro', sans-serif;
    text-align: center;
    color: #A0F2EA;
}
.logo {
    width: 400px;
    height: 250px;
    border: 3px solid #1B0273;
    border-radius: 10px;
    box-shadow: 5px 5px 20px #A0F2EA;
    margin-top: 50px;
}
body {
    height: 100vh;
    background-color: #E1B598;
}
.car-art {
    display: none;
}

.airplane-art {
    display: none;
}

.main {
    border: 2px solid white;
    background-color: #1B0273;
}

.footer {
    border: 2px solid white;
    background-color: #1B0273;
}
.comment-button {
    color: white;
    padding: 5px;
}
.button {
    background-color: #3966BF;
    color: white;
}
.button:hover {
    background-color: #A0F2EA;
    color: #1B0273;
    transition: ease-in 0.2s;
    cursor: pointer;
}
a { text-decoration: none; color: white;}
a:visited { text-decoration: none; color:white; }
a:hover { text-decoration: none; color:white; }
a:focus { text-decoration: none; color:white; }
a:hover, a:active { text-decoration: none; color:white }
.name{
    color: #1B0273
}
.create {
    color: #A0F2EA
}
p {
    color: #4A88D9;
}
._blank{
    color: #A0F2EA;
}
@media only screen and (max-width: 985px) {
.container {
    display: inline-block;
    text-align: center;
}
.card {
    margin: 25px;
}
}
</style>