<!DOCTYPE html>
<html>
  <head>
    {{>head}}
  </head>
  <body id="samples">

    {{>menu}}

    <div class="okta-sign-in-form ui center aligned relaxed grid">

      <div class="row">
        <div class="ui header">
          <h2>Login with Username{{#hasPassword}} and Password{{/hasPassword}}</h2>
        </div>
      </div>

      <div class="row">
        {{>formMessages}}
      </div>

      <div class="row">
        <form id="login-form" class="ui large form" action="{{action}}" method="POST">
          <div class="field">
            <div class="ui labeled input">
              <div class="ui label">
                Username
              </div>
              <input id="username" type="text" name="username" required />
            </div>
          </div>
          {{#hasPassword}}
          <div class="field">
            <div class="ui labeled input">
              <div class="ui label">
                Password
              </div>
              <input id="password" type="password" name="password" required />
            </div>
          </div>
          {{/hasPassword}}
          <button id="submit-login-form" class="ui fluid large primary submit button" type="submit">
            LOGIN
          </button>
        </form>
      </div>

      <div class="ui row grid">
        {{#hasIdps}}
          <div id="idp-buttons" class="ui row">
            {{#idps}}
              <button id="{{id}}" onclick="handleLoginWithIdp(event, '{{href}}')" class="ui {{class}} button">
                {{name}}
              </button>
            {{/idps}}
          </div>
        {{/hasIdps}}

        {{#canRecoverPassword}}
        <div class="ui messages row">
          <a name="forgotPassword" href="/recover-password?transactionId={{transactionId}}">Forgot your password?</a>
        </div>
        {{/canRecoverPassword}}

        {{#canSignup}}
        <div class="ui messages row">
          <a href="/register?transactionId={{transactionId}}">Sign Up</a>
        </div>
        {{/canSignup}}
        
      </div>

    </div>

    <script type="text/javascript">
      function handleLoginWithIdp(event, href) {
        var buttonEl = event.currentTarget;
        buttonEl.disabled = true;
        window.location.href = href;
      };
    </script>
  </body>
</html>
