<!DOCTYPE html>
<html>
  <head>
    <title>xTuple Login</title>
    <link rel="shortcut icon" href="/assets/favicon.ico" />
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/stylesheets/screen.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  </head>
  <body>

  <div class="container">
    <div>
      <img draggable="false" class="header_image" src="/assets/logo.png">
    </div>
    <div class="panel panel-primary main">
      <div class="panel-body">
        <form role="form" name="loginForm" autocomplete="off" action="/login" method="post">
          <input type="hidden" id="hash" name="hash">
          <div class="form-group">
            <label for="form-fields_id">Username</label>
            <input
              type="text"
              class="form-control input-sm"
              id="form-fields_id"
              name="id"
              placeholder="username"
              autocapitalize="off"
              autocorrect="off">
          </div>
          <div class="form-group">
            <label for="form-fields_password">Password</label>
            <input
              type="password"
              class="form-control input-sm"
              id="form-fields_password"
              placeholder="password"
              name="password"
              type="password"
              autocapitalize="off"
              autocorrect="off">
          </div>
          <div class="form-group">
            <label for="form-fields_database">Database</label>
            <select
              class="form-control input-sm"
              id="form-fields_database"
              name="database">
                <% for(var i = 0; i < databases.length; i++) { %>
                  <option value="<%= databases[i] %>"><%= databases[i] %></option>
                <% } %>
            </select>
          </div>
          <div>
            <div class="pull-right">
              <input
                class="btn btn-info"
                name="submit"
                id="form-fields_loginButton"
                type="submit"
                value="Sign In"/>
            </div>
          </div>
          <div class="pull-left">
            <a href="forgot-password">Forgot password?</a>
          </div>
        </form>
    </div>
    </div>
    <% for(var i = 0; i < message.length; i++) { %>
      <div class="alert alert-danger" role="alert"><%= message[i] %></div>
    <% } %>
  </div>

  <script>
    document.loginForm.id.focus();
    document.loginForm.hash.value = window.location.hash;
  </script>
  </body>
</html>
