<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <h1 class="my -3">Blog Articles</h1>
        <a href="/articles/new" class="btn btn-success">New Article</a>
        <div class="row ">
            <% articles.forEach(articles=>{ %>
         
                <div class="card p-3 m-2" style="width: 18rem;">
                    <div class="card-body">
                      <h5 class="card-title"><%= articles.title%></h5>
                      <h6 class="card-subtitle mb-2 text-body-secondary"><%= articles.createdAt.toLocaleDateString() %></h6>
                      <p class="card-text"><%= articles.description%></p>
                      <a href="/articles/<%= articles.id %>" class="btn btn-info">Read more</a>
                      <form class="d-inline" action="/articles/<%= articles.id %>?_method=DELETE" method="post">
                        <button type="submit" class="btn btn-danger">Delete</button>
                      </form>
                    </div>
                  </div>
           <% }) %>  
        </div>
    </div>





    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js" integrity="sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa" crossorigin="anonymous"></script>
</body>
</html>