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

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

<main>
  <div class="centered">
    <h1>Signup</h1>
  </div>
  <% if (errorMessage) { %>
    <div class="user-message user-message__error"><%= errorMessage %></div>
  <% } %>
  <form class="login-form" action="/signup" method="POST" novalidate>
    <div class="form-control">
      <label for="email">E-Mail</label>
      <input class="<%= validationErrors.find(e => e.param === 'email') ? 'invalid' : '' %>"
             type="email"
             name="email"
             id="email"
             value="<%= oldInput.email %>">
    </div>
    <div class="form-control">
      <label for="password">Password</label>
      <input class="<%= validationErrors.find(e => e.param === 'password') ? 'invalid' : '' %>"
             type="password"
             name="password"
             id="password"
             value="<%= oldInput.password %>">
    </div>
    <div class="form-control">
      <label for="confirmPassword">Confirm Password</label>
      <input class="<%= validationErrors.find(e => e.param === 'confirmPassword')
              ? 'invalid'
              : '' %>"
             type="password"
             name="confirmPassword"
             id="confirmPassword"
             value="<%= oldInput.confirmPassword %>">
    </div>
    <div class="centered">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <button class="btn" type="submit">Signup</button>
    </div>
  </form>
</main>
<%- include('../includes/end.ejs') %>
