<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Login</title>
  <style>
  * { box-sizing: border-box; }
  body { margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  html { width: 100%; height: 100%; overflow: hidden; }
  body {
    font-size: 18px;
    width: 18em;
    color: #fff;
    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
  }
  a { color: inherit; }
  .alert { background-color: #fee; color: #000; padding: 10px 0.5em 5px 0.5em; }
  label, input, button { font: inherit; }
  input { padding: 0 5px; width: 12em; }
  button { display: block; width: 100%; }
  h2 { margin: 0; }
  .row { display: flex; justify-content: space-between; }
  </style>
</head>
<body>
  <h1>Login</h1>

  {% if error %}
    <div class="alert">
      <h2>Error</h2>
      <p>{{ msg }}</p>
    </div>
  {% end %}

  {% set kwargs = handler.kwargs %}
  {% try %}{% set user = kwargs.user.arg %}{% except %}{% set user = 'user' %}{% end %}
  {% try %}{% set password = kwargs.password.arg %}{% except %}{% set password = 'password' %}{% end %}
  <form method="POST">
    <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
    {% if phone is None or error == 'not-sent' %}
      <p class="row">
        <label for="{{ user }}">Mobile</label>
        <input type="tel" name="{{ user }}" value="{{ phone or '' }}" autofocus>
      </p>
      <button type="submit">Send Password via SMS</button>
    {% else %}
      <p class="row">
        <label for="{{ user }}">Mobile</label>
        <input type="tel" name="{{ user }}" value="{{ phone }}" readonly>
      </p>
      <p class="row">
        <label for="{{ password }}">Password</label>
        <input name="{{ password }}" type="password" autofocus>
      </p>
      <button type="submit">Log in</button>
    {% end %}
  </form>
</body>
</html>
