<h1 class="page-title">Sign in</h1>
<div class="card">
  <div class="card-body">
    {% if error %}
    <div class="alert alert-danger mb-3" role="alert">{{ error }}</div>
    {% endif %}
    <form method="post" action="/login" class="needs-validation" novalidate>
      <input type="hidden" name="next" value="{{ next }}">
      <div class="mb-3">
        <label class="form-label required" for="login_username">Username</label>
        <input type="text" class="form-control" id="login_username" name="username" required
               autocomplete="username" autofocus>
      </div>
      <div class="mb-3">
        <label class="form-label required" for="login_password">Password</label>
        <input type="password" class="form-control" id="login_password" name="password" required
               autocomplete="current-password">
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
    <p class="mt-3 mb-0 text-muted small">API clients can use <code>POST /token</code> (OAuth2 password) instead.</p>
  </div>
</div>