    <%- include("partials/header.ejs") %>
    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
      <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="10"/>
        <path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
      </symbol>
      <symbol id="cart" viewBox="0 0 16 16">
        <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
      </symbol>
      <symbol id="chevron-right" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
      </symbol>
    </svg>
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
      data-bs-backdrop="static"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">
              Write something unique!
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form action="/create" method="post" id="blogForm">
              <div class="mb-3">
                <label for="blog-title" class="col-form-label">Title</label>
                <input
                  type="text"
                  class="form-control"
                  id="blog-title"
                  name="title"
                />
              </div>
              <div class="mb-3">
                <label for="blog-description" class="col-form-label"
                  >Description</label
                >
                <textarea
                  class="form-control"
                  id="blog-description"
                  name="description"
                ></textarea>
              </div>
              <div class="mb-3">
                <label for="blog-content" class="col-form-label">Content</label>
                <textarea
                  class="form-control"
                  id="blog-content"
                  name="content"
                  rows="5"
                ></textarea>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Close
                </button>
                <input class="btn btn-primary" type="submit" value="Publish" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <main class="container">
      <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
        <div class="col-lg-6 px-0">
          <h1 class="display-4 fst-italic">
            Welcome to the blog application
          </h1>
          <p class="lead my-3">
            This is the 3rd capstone project of 
            <a href="https://www.udemy.com/course/the-complete-web-development-bootcamp/" target="_blank">
              <q>The Complete 2024 Web Development Bootcamp</q></a>
            where Express and EJS knowledge is put into test.
          </p>
          <p class="lead mb-0">
            <a href="https://github.com/immkavin-ranks/blog-app" target="_blank" class="text-body-emphasis fw-bold">Visit Github Repo</a>
          </p>
        </div>
      </div>

      <div class="row row-cols-1 mb-2">
        <% if (locals.blogs) { %> <% blogs.forEach(blog => { %>
        <div class="col-md-6 blog-card">
          <div
            class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
          >
            <div class="col p-4 d-flex flex-column position-static">
              <h3 class="mb-0"><%= blog.title %></h3>
              <div class="mb-1 text-body-secondary">
                <%= blog.createdDate %>
              </div>
              <p class="mb-auto"><%= blog.description %></p>
              <a
                href="/view/<%= blog.id %>"
                class="icon-link gap-1 icon-link-hover"
              >
                Continue reading
                <svg class="bi"><use xlink:href="#chevron-right" /></svg>
              </a> 
              <a
                href="/edit/<%= blog.id %>"
                class="icon-link gap-1 icon-link-hover"
              >
                Edit
                <svg class="bi"><use xlink:href="#chevron-right" /></svg>
              </a>
              <a
                href="/delete/<%= blog.id %>"
                class="icon-link gap-1 icon-link-hover"
              >
                Delete
                <svg class="bi"><use xlink:href="#chevron-right" /></svg>
              </a>           
            </div>
          </div>
        </div>
        <% }) %> <% } %>
      </div>
    </main>

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

    <!-- reset the modal values on close -->
    <script>
      $('#exampleModal').on('hidden.bs.modal', function () {
          $(this).find('form').trigger('reset');
      });
    </script>
  </body>
</html>
