<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>myBloog :: <%= page %></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
  <link rel="stylesheet" href="/styles/global.css" />
  <link rel="stylesheet" href="/styles/blogCreating.css" />

</head>

<body>
  <%- include('./components/navbar.ejs') %>
  <!-- Main -->
  <div class="blogs">
    <%- include('./components/blog.ejs', { blog, link: false }) %>

    <!-- Errors -->
    <div class="alerts text-bg-dark col-md-4 col-10"></div>

    <!-- Comment input -->
    <div class="comment-input">
      <div class="accordion col-md-4 col-10 mb-2">
        <div class="accordion-item border-dark">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed text-bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne">
              Click to write your comment:
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse">
            <div class="accordion-body text-bg-dark">
              <div class="card text-bg-dark">
                <!-- Comments text input -->
                <div class="card-body">
                  <div class="form-floating">
                    <textarea class="blog-text form-control text-bg-dark" id="floatingTextarea" style="height:120px;" minlength="1" maxlength="255"></textarea>
                    <label for="floatingTextarea">Write your comment</label>
                  </div>
                  <p class="card-text">
                    <small><span id="letter-counter">0</span>/255</small>
                  </p>
                </div>
                <div class="container d-flex justify-content-end">
                  <button type="button" id='[<%= blog.id %>, ""]' class="btn btn-success submit-btn">
                    Submit comment
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Other users comment -->
    <div class="comments">
      <% comments.forEach((comm, i) => { %>
        <%- include('./components/comment.ejs', { comm: comm, link: true, accordion: false }) %>

        <% if (comm.responses.length > 0) { %>
          <div class="accordion col-md-4 col-10 mb-2">
            <div class="accordion-item border-dark">
              <h2 class="accordion-header">
                <button class="accordion-button collapsed text-bg-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapse<%= i %>" aria-controls="collapseOne">
                  Click to read more:
                </button>
              </h2>
              <div id="collapse<%= i %>" class="accordion-collapse collapse">
                <!-- Comments responses -->
                <div class="accordion-body text-bg-dark">

                  <% comm.responses.forEach((response) => { %>
                  <%- include('./components/comment.ejs', { comm: response, link: true, accordion: true }) %>
                  <% }) %>

                </div>
              </div>
            </div>
          </div>
        <% } %>
      <% }) %>
    </div>

  </div>
</body>

<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.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

<script src="/scripts/index.js"></script>
<script src="/scripts/commentCreation.js"></script>


</html>