<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Settings - LiteLib</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="/css/style.css">

    <!-- Favicon Information -->
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="194x194" href="/favicon/favicon-194x194.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/site.webmanifest">
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#805a3f">
    <link rel="shortcut icon" href="/favicon/favicon.ico">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
    <meta name="msapplication-config" content="/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
  </head>
  <body>

    <% if(errorMessage) { %>
      <div class="container mt-5">
        <div class="alert alert-danger alert-dismissible" role="alert">
          <%= errorMessage %>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      </div>
    <% } %>

    <% if(message) { %>
      <div class="container mt-5">
        <div class="alert alert-primary alert-dismissible" role="alert">
          <%= message %>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      </div>
    <% } %>

    <h1 class="mt-5 mb-5" style="text-align:center;"><i class="bi bi-gear-wide-connected"></i> Settings</h1>
    <h2 class="mt-5 mb-5" style="text-align:center;"><i class="bi bi-person"></i> Edit Your Personal Information</h2>

    <div class="container">
        <form action="/settings" method="post" id="userForm">
            <label for="username" style="text-align: left;">Username:</label>
            <input id="newUsername" name="newUsername" class="form-control form-control-lg mb-5" value="<%= user.username %>" autocomplete="newUsername" required>
            <label for="name" style="text-align: left;">Name:</label>
            <input id="name" name="name" class="form-control form-control-lg mb-5" value="<%= user.name %>" autocomplete="name" required>
            <label for="newPassword" style="text-align: left;">New Password:</label>
            <input id="newPassword" name="newPassword" class="form-control form-control-lg mb-5" type="newPassword" autocomplete="newPassword">
            <!-- hidden input field to receive old username -->
            <input type="hidden" id="username" name="username" value="<%= username %>">
        
          <!-- Buttons -->
          <div class="container" style="padding: 0px;">
            <div class="d-flex justify-content-between align-items-center">
              <a href="/" class="btn btn-primary btn-lg"><i class="bi bi-house-door-fill"></i> Home</a>
              <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="/" class="btn btn-secondary btn-lg"><i class="bi bi-x-circle-fill"></i> Cancel</a>
                <button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-floppy2-fill"></i> Save</button>
              </div>
            </div>
          </div>
        </form>
        
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="/js/message-dismiss.js"></script>

  </body>
</html> 