<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Register</title>
    <style type="text/css">
      <%- include('main.css', {}); %>
     </style>
  </head>
  <body>
    <header role="navigation" class="header header__desktop fixed">
      <section class="header-wrap">
        <div class="logo-block">
          <img src="https://design.inrupt.com/atomic-core/img/solid.svg" />
        </div>
      </section>
    </header>
    <div class="main-content">
      <section class="main-content-section">
        <div class="wrapper">
          <h1 class="title--white">Register</h1>
          <div class="login-panel">
            <div class="panel-body">
              <form autocomplete="off" action="<%= details.pathPrefix %>/interaction/<%= details.uid %>/register" method="post">

                <%if (errorMessage) { %>
                  <div class="input-wrap">
                    <label style="color: #D0021B">
                      <%= errorMessage %>
                    </label>
                  </div>
                <% } %>

                <div class="input-wrap">
                  <label>Username:</label>
                  <input type="text" name="webId" autofocus="on" <% if (prefilled.username) { %> value="<%= prefilled.username %>" <% } %> />
                </div>

                <div class="input-wrap">
                  <label>Password:</label>
                  <input type="password" name="password" />
                </div>

                <div class="input-wrap">
                  <label>Confirm Password:</label>
                  <input type="password" name="confirmPassword" />
                </div>

                <div class="input-wrap">
                  <label>Email (for password recovery):</label>
                  <input type="email" name="email" <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %> />
                </div>

                <button type="submit" name="submit" class="ids-link-filled">Create Identity</button>

                <hr />
                <div class="space-between">
                  <a href="<%= details.pathPrefix %>/interaction/<%= details.uid %>/login" class="link">Sign In</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>