<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Forgot Password</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">Forgot Password</h1>
            <div class="login-panel">
              <div class="panel-body">
                <form autocomplete="off" action="<%= details.pathPrefix %>/interaction/<%= details.uid %>/forgotpassword" 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="username" autofocus="on" />
                  </div>
          
                  <button type="submit" name="submit" class="ids-link-filled">Send Recovery Email</button>

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