{{define "sign_in.html"}}
<!DOCTYPE html>
<html lang="en" charset="utf-8">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Sign In</title>
    <link rel="stylesheet" href="{{.ProxyPrefix}}/static/css/bulma.min.css">

    <style>
      body {
        height: 100vh;
      }
      .sign-in-box {
        max-width: 400px;
        margin: 1.25rem auto;
      }
      .logo-box {
        margin: 1.5rem 3rem;
      }
      .alert {
        padding: 5px;
        background-color: #f44336; /* Red */
        color: white;
        margin-bottom: 5px;
        border-radius: 5px
      }
      /* The close button */
      .closebtn {
        margin-left: 10px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
      }
      /* When moving the mouse over the close button */
      .closebtn:hover {
        color: black;
      }
      footer a {
        text-decoration: underline;
      }
    </style>
  </head>
  <body class="has-background-light">
  <section class="section has-background-light">
    <div class="box block sign-in-box has-text-centered">
      {{ if .LogoData }}
      <div class="block logo-box">
        {{.LogoData}}
      </div>
      {{ end }}

      <form method="GET" action="{{.ProxyPrefix}}/start">
        <input type="hidden" name="rd" value="{{.Redirect}}">
          {{ if .SignInMessage }}
          <p class="block">{{.SignInMessage}}</p>
          {{ end}}
          <button type="submit" class="button block is-primary">Sign in with {{.ProviderName}}</button>
      </form>

      {{ if .CustomLogin }}
      <hr>

      <form method="POST" action="{{.ProxyPrefix}}/sign_in" class="block">
        <input type="hidden" name="rd" value="{{.Redirect}}">

        <div class="field">
          <label class="label" for="username">Username</label>
          <div class="control">
            <input class="input" type="text" placeholder="e.g. userx@example.com"  name="username" id="username">
          </div>
        </div>

        <div class="field">
          <label class="label" for="password">Password</label>
          <div class="control">
            <input class="input" type="password" placeholder="********" name="password" id="password">
          </div>
        </div>
        <button class="button is-primary">Sign in</button>
      </form>
      {{ end }}

      {{ if eq .StatusCode 400 401 }}
      <div class="alert">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        {{ if eq .StatusCode 400 }}
        {{.StatusCode}}: Username cannot be empty
        {{ else }}
        {{.StatusCode}}: Invalid Username or Password
        {{ end }}
      </div> 
      {{ end }}

    </div>
  </section>

  <script>
    if (window.location.hash) {
      (function() {
        var inputs = document.getElementsByName('rd');
        for (var i = 0; i < inputs.length; i++) {
          // Add hash, but make sure it is only added once
          var idx = inputs[i].value.indexOf('#');
          if (idx >= 0) {
            // Remove existing hash from URL
            inputs[i].value = inputs[i].value.substr(0, idx);
          }
          inputs[i].value += window.location.hash;
        }
      })();
    }
  </script>

  <footer class="footer has-text-grey has-background-light is-size-7">
    <div class="content has-text-centered">
    	{{ if eq .Footer "-" }}
    	{{ else if eq .Footer ""}}
    	<p>Secured with <a href="https://github.com/oauth2-proxy/oauth2-proxy#oauth2_proxy" class="has-text-grey">OAuth2 Proxy</a> version {{.Version}}</p>
    	{{ else }}
    	<p>{{.Footer}}</p>
    	{{ end }}
    </div>
	</footer>

  </body>
</html>
{{end}}
