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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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/settings.css" />
</head>

<body data-bs-spy="scroll" data-bs-target="#navbar-settings" data-bs-offset="50">
  <%- include('./components/navbar.ejs') %>
  <div class="settings text-bg-dark ">

    <nav class="col-md-2 col-3 bg-body-tertiary bg-dark border-bottom border-body text-bg-dark" data-bs-theme="dark">
      <div class="navbar-settings">
        <div class="d-flex align-items-center">
          <span class="fs-4">User Settings</span>
        </div>
        <hr>
        <ul class="nav-links nav flex-column mb-auto">
          <li class="nav-item">
            <a href="#image-preview" class="nav-link" aria-current="page">Image Preview</a>
          </li>
          <li>
            <a href="#profile" class="nav-link">Profile</a>
          </li>
          <li>
            <a href="#private-info" class="nav-link">Private Information</a>
          </li>
          <li>
            <div class="alerts"></div>
          </li>
        </ul>
      </div>
    </nav>

    <div class="forms col-md-8 col-9">
      <!-- Added margin to compensate for fixed navbar -->
      <div id="image-preview" class="text-bg-dark">
        <h2>Image Preview</h2>
        <form class="mb-3 image-form">
          <div class="preview">
            <img src="<%= profile.img %>" class="rounded-circle mr-2" alt="User Profile" style="width: 120px; height: 120px;">
            <img src="<%= profile.img %>" class="rounded-circle mr-2" alt="User Profile" style="width: 90px; height: 90px;">
            <img src="<%= profile.img %>" class="rounded-circle mr-2" alt="User Profile" style="width: 40px; height: 40px;">
          </div>
          <div class="mb-3">
            <label for="profile_image" class="form-label">Profile Image</label>
            <input type="file" id="imageInput" class="form-control text-bg-dark" id="largeImage">
          </div>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </form>
      </div>

      <hr>

      <div id="profile" class="text-bg-dark">
        <h2>Profile</h2>
        <form class="mb-3 profile-form">
          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control text-bg-dark" name="username" value="<%= profile.username %>" required>
          </div>
          <div class="mb-3">
            <label for="description" class="form-label">Description</label>
            <textarea class="blog-text form-control text-bg-dark" name="description" maxlength="255"><%= profile.description %></textarea>
            <small><span id="letter-counter">0</span>/255</small>
          </div>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </form>
      </div>

      <hr>

      <div id="private-info" class="text-bg-dark">
        <h2>Private Information</h2>
        <form class="mb-3 private-form">
          <div class="mb-3">
            <label for="firstName" class="form-label">First Name</label>
            <input type="text" class="form-control text-bg-dark" name="firstName" value="<%= profile.name %>">
          </div>
          <div class="mb-3">
            <label for="lastName" class="form-label">Last Name</label>
            <input type="text" class="form-control text-bg-dark" name="lastName" value="<%= profile.surname %>">
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control text-bg-dark" name="email" value="<%= profile.email %>" required>
          </div>
          <div class="mb-3">
            <label for="currentPassword" class="form-label">Current Password</label>
            <div class="input-group">
              <input type="password" class="form-control text-bg-dark" name="currentPassword" required/>
              <input type="button" class="btn btn-outline-secondary text-bg-dark" id="showpass" value="Show Password">
            </div>
          </div>
          <div class="mb-3">
            <label for="newPassword" class="form-label">New Password</label>
            <div class="input-group">
              <input type="password" class="form-control text-bg-dark" name="newPassword" />
              <input type="button" class="btn btn-outline-secondary text-bg-dark" id="showpass" value="Show Password">
            </div>
          </div>
          <div class="mb-3">
            <label for="confirmPassword" class="form-label">Confirm Password</label>
            <div class="input-group">
              <input type="password" class="form-control text-bg-dark" name="confirmPassword" />
              <input type="button" class="btn btn-outline-secondary text-bg-dark" id="showpass" value="Show Password">
            </div>
          </div>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </form>
      </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/settings.js"></script>
</html>