<%- include('../includes/head.ejs') %>
<link rel="stylesheet" href="/css/auth.css">
<link rel="stylesheet" href="/css/forms.css">
</head>

<body>
<%- include('../includes/navigation.ejs') %>

<main>
  <div class="centered">
    <h1>New Password</h1>
  </div>
  <% if (errorMessage) { %>
    <div class="user-message user-message__error"><%= errorMessage %></div>
  <% } %>
  <form class="login-form" method="POST" action="/new-password">
    <div class="form-control">
      <label for="password">New Password</label>
      <input type="password" name="password" id="password">
    </div>
    <div class="form-control">
      <label for="confirmPassword">Confirm New Password</label>
      <input type="password" name="confirmPassword" id="confirmPassword">
    </div>
    <div class="centered">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <input type="hidden" name="userId" value="<%= userId %>">
      <input type="hidden" name="passwordToken" value="<%= passwordToken %>">
      <button class="btn" type="submit">Update password</button>
    </div>
  </form>

</main>

<%- include('../includes/end.ejs') %>
</body>
