<!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') %>
  <!-- Blogs container -->
  <div class="blogs">
    <div class="alerts text-bg-dark col-md-4 col-10"></div>
    <!-- Blog Post Start -->
    <div class="card text-bg-dark col-md-4 col-10 mb-2">
      <!-- Blog User -->
      <div class="card-header position-relative d-flex">
        <!-- User name and image -->
        <div class="d-flex align-items-center" style="width: 50%;">
          <img src="<%= user.img %>" class="rounded-circle mr-2" alt="User Profile" style="width: 40px; height: 40px;" />
          <h5 class="ms-2">
            <%= user.username %>
          </h5>
        </div>
        <!-- blog settings -->
        <div class="position-absolute end-0">
          <div class="dropdown">
            <button class="btn text-bg-dark" data-bs-toggle="dropdown">
              <i class="bi bi-three-dots"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-dark">
              <select class="form-select text-bg-dark blog-status">
                <option value="1" selected>Status: Public</option>
                <option value="2">Status: Private</option>
              </select>

              <li>
                <a class="dropdown-item text-danger" href="#">Delete post</a>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Blog text -->
      <div class="card-body">
        <div class="form-floating">
          <textarea class="blog-text form-control text-bg-dark" id="floatingTextarea" style="height: 200px;" minlength="1" maxlength="255"></textarea>
          <label for="floatingTextarea">Yours blog text</label>
        </div>
        <p class="card-text">
          <small><span id="letter-counter">0</span>/255</small>
        </p>
      </div>

      <!-- Post Image -->
      <div class="card-body">
        <div class="container py-5">
          <h2 class="mb-4">Download and preview image</h2>
          <small>Max images: 6</small>
          <input type="file" id="imageInput" class="form-control mb-3 text-bg-dark" accept="image/*" multiple />
          <div class="image-preview-container" id="previewContainer"></div>
        </div>
      </div>

      <!-- Blog Post End -->
      <div class="card-footer icons">
        <!-- Like Icon -->
        <div class="icon" title="like">
          <i class="bi bi-heart-fill"></i>0
        </div>
        <!-- Views Icon -->
        <div class="icon" title="comments">
          <i class="bi bi-chat-dots-fill"></i>0
        </div>
        <!-- Comments Icon -->
        <div class="icon text-info" title="views">
          <i class="bi bi-eye-fill"></i>0
        </div>

        <div class="d-flex justify-content-end" style="width: 80%;">
          <button type="button" class="btn btn-success submit-btn">
            Submit blog
          </button>
        </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/blogCreation.js"></script>

</html>