<!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">
    <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">
    <title>Atlanta</title>
</head>
<body>
    <nav>
        <%- include('./partials/nav.ejs')%>
    </nav>
    <img class= 'logo' src=https://i.pinimg.com/originals/e8/e4/09/e8e4097cd41cb3a8cd1d58fff8b2850a.jpg>
    <h1 class="description"> Situated among the foothills of the Appalachian Mountains, Atlanta features unique topography that includes rolling hills and the most dense urban tree coverage in the United States, earning it the nickname of "the city in a forest."
        Atlanta is the capital of the State of Georgia. It played an important part in both the Civil War and the 1960s Civil Rights Movement.
         Downtown Centennial Olympic Park, built for the 1996 Olympics, encompasses the massive Georgia Aquarium which is the largest in the U.S and number four largest in the world. </h1>
    <div class="container">
        <div class="card" style="width: 28rem;">
            <p class="titles">Restaurants</p>
            <div class="card-body">
                <img class="card-img-top" src=https://www.exploregeorgia.org/sites/default/files/styles/slideshow_large/public/legacy_images/the-varsity-1409155532.jpg?itok=azPRSiw9alt="Card image cap">
                <% for (let i = 0; i < restaurants.length; i++) { %>
                    <div class="card-title">
                        <%=restaurants[i].name%>
                    <h4 class="card-text"><%=restaurants[i].location%></h4>
                    <h5 class="card-text"><%=restaurants[i].hours%></h5>
                </div>
                <% } %>
            </div>
          </div>
          <div class="card" style="width: 28rem;">
            <p class="titles">Landmarks</p>
            <div class="card-body">
                <img class="card-img-top" src=https://res.cloudinary.com/atlanta/images/w_2560,h_1707/f_auto,q_auto/v1617478635/newAtlanta.com/Atlanta_Murals_Downtown_STATS_CreditCW_5_/Atlanta_Murals_Downtown_STATS_CreditCW_5_.jpg?_i=AA alt="Card image cap">
                <% for (let i = 0; i < landmarks.length; i++) { %>
                    <div class="card-title">
                        <%=landmarks[i].name%>
                    <h4 class="card-text"><%=landmarks[i].location%></h4>
                    <h5 class="card-text"><%=landmarks[i].hours%></h5>
                </div>
                <% } %>
            </div>
          </div>
          <div class="card" style="width: 28rem;">
            <p class="titles">Events</p>
            <div class="card-body">
                <img class="card-img-top" src=https://peachtreecenter.com/wp-content/uploads/2018/12/Big-Game-scaled.jpg alt="Card image cap">
                <% for (let i = 0; i < events.length; i++) { %>
                    <div class="card-title">
                        <%=events[i].name%>
                    <h4 class="card-text"><%=events[i].location%></h4>
                    <h5 class="card-text"><%=events[i].hours%></h5>
                </div>
                <% } %>
            </div>
          </div>
    </div>
    <div class="container2">
        <p>Leave a comment!</p>
    </p><a href="/comments/new"><span class="comment-button">Comment</span></a>
        <br>
        <br>
        <% for (let i=0; i<comments.length;i++) { %>
            <a href="/comments/<%=comments[i]._id%>/edit">
            <%=comments[i].name%> </a>
            <br>
            <%=comments[i].comment%>
            <br>
            <br>
        <% } %>
    </div>
    <footer>
        <%- include('./partials/footer.ejs')%>
    </footer>
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-family: Georgia, 'Times New Roman', Times, serif;
        text-align: center;
        color: #B8AEAE;
    }
    body {
        height: 100vh;
        background-color: #DAA2A2;
        }
    .container2 {
        border: 2px solid white;
        border-radius: 10px;
        background-color: #6E2525;
        box-shadow: 5px 5px 20px #0A0504;
        color: #942525;
        word-wrap: break-word;
        margin: auto;
        margin-top: 100px;
        margin-bottom: 100px;
        width: 70%;
        padding: 10px;
        text-align: left;
    }
    .container {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        font-size: 30px;
        margin-top: 50px;
        color: #76B6C4;
    }
    .card {
        border: 2px solid white;
        background-color: #942525;
        border-radius: 10px;
        box-shadow: 5px 5px 20px #942525;
    }
    .card-img-top {
        height: 150px;
        width: 237px;
        text-align: center;
        margin: 0 auto;
        display: block;
        border: 2px solid white;
        border-radius: 10px;
    }
    .card-body {
        text-align: center;
        margin: 10px;
        background-color: #942525;
        color: #311111;
    }
    .card-title {
        font-size: 24px;
        border: 2px solid white;
        margin: 10px;
        border-radius: 10px;
        color: #B8AEAE;
    }
    .description {
        text-align: center;
        font-size: 20px;
        display: inline-block;
        width: 80%;
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: #551E1E;
        margin-top: 50px;
    }
    .logo {
        width: 400px;
        height: 250px;
        border: 3px solid white;
        border-radius: 10px;
        box-shadow: 5px 5px 20px #1D100C;
        margin-top: 50px;
    }
    .car-art {
        display: none;
    }
    .airplane-art {
        display: none;
    }
    .main {
        border: 2px solid white;
        background-color: #742222;
    }
    .footer {
        border: 2px solid white;
        background-color: #742222;
    }
    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 }
    .comment-button {
        border: 1px solid white;
        border-radius: 3px;
        color: white;
        padding: 5px;
        float: right;
    }
    .comment-button:hover {
        background-color: #942525;
        transition: ease-in 0.2s;
    }
    @media only screen and (max-width: 985px) {
    .container {
        display: inline-block;
        text-align: center;
    }
    .card {
        margin: 25px;
    }
}
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>