{{define "login"}}{{template "header" .}}
<div class="row justify-content-center">
  <div class="col-md-5 col-lg-4">
    <div class="card shadow-sm">
      <div class="card-body text-center p-4 p-md-5">
        <img src="/static/vendors/mokoonyx/logo.png" alt="Moko" height="40" class="mb-3">
        <h2 class="h5 mb-4">Sign in to MokoTranslate</h2>
        {{if .Error}}<div class="alert alert-danger text-start small"><i class="fa-solid fa-circle-exclamation me-1"></i>{{.Error}}</div>{{end}}
        {{if .Notice}}<div class="alert alert-info text-start small"><i class="fa-solid fa-hourglass-half me-1"></i>{{.Notice}}</div>{{end}}
        {{if .OAuth}}
        <a class="btn btn-mk btn-lg w-100" href="/oauth/google/login?next={{.Next}}">
          <i class="fa-brands fa-google me-2"></i>Sign in with Google
        </a>
        <p class="small text-body-secondary mt-3 mb-0">Restricted to authorized accounts.</p>
        {{else}}
        <p class="text-body-secondary mb-0">Google sign-in is not configured. Authenticate with HTTP basic auth.</p>
        {{end}}
      </div>
    </div>
  </div>
</div>
{{template "footer" .}}{{end}}