{{define "title"}}Sign in · MeshTender{{end}}
{{define "content"}}
<div class="card card-md">
  <div class="card-body">
    <h1 class="card-title text-center mb-4">Sign in to your account</h1>
    {{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}
    {{/* Success flash: a completed password reset and a confirmed email address both
         land here, and both need to say so — otherwise the visitor can't tell whether
         what they just did worked. */}}
    {{if .OK}}<div class="alert alert-success">{{.OK}}</div>{{end}}

    <form method="post" action="/login/password" id="signin-form">
      {{if .Next}}<input type="hidden" name="next" value="{{.Next}}">{{end}}
      <div class="mb-3">
        <label class="form-label" for="username">Username</label>
        <input type="text" class="form-control" id="username" name="username" autocomplete="username webauthn" autocapitalize="none" placeholder="your-username" required>
      </div>

      {{/* Wrapped so webauthn.js can hide the whole passkey affordance when the
           browser has no WebAuthn support, rather than leaving a dead button. The
           password half is never collapsed here: a returning visitor may well not
           have a passkey, so hiding their way in would be hostile. */}}
      <div id="passkey-section">
        <div class="form-footer mt-0">
          <button type="button" class="btn btn-primary w-100" id="passkey-btn">{{template "icon-key" "me-2"}}Sign in with a passkey</button>
        </div>
        <p id="passkey-status" class="text-secondary text-center small mt-2 mb-0" style="min-height:1.2em"></p>
      </div>

      <div class="hr-text" id="password-divider">or use your password</div>

      <div class="mb-3">
        {{/* Rendered only when mail is configured: a "Forgot password?" link that leads
             to a form we can't act on is worse than no link. */}}
        <label class="form-label" for="password">
          Password
          {{if .MailEnabled}}<span class="form-label-description"><a href="/forgot" tabindex="-1" data-testid="forgot-link">Forgot password?</a></span>{{end}}
        </label>
        <div class="input-group input-group-flat">
          <input type="password" class="form-control" id="password" name="password" autocomplete="current-password" placeholder="Your password" required>
          <span class="input-group-text">
            <button type="button" class="link-secondary border-0 bg-transparent p-0" aria-pressed="false" title="Show password" data-pwtoggle="password" aria-label="Show password">{{template "icon-eye" ""}}</button>
          </span>
        </div>
      </div>
      <div class="form-footer mt-0">
        <button type="submit" class="btn w-100">Sign in with password</button>
      </div>
    </form>
  </div>
</div>
<div class="text-center text-secondary mt-3">Don't have an account yet? <a href="/signup{{if .Next}}?next={{.Next}}{{end}}" tabindex="-1">Create one</a></div>
<script src="{{ asset "/static/webauthn.js" }}"></script>
<script nonce="{{.Nonce}}">document.addEventListener("DOMContentLoaded", initSigninPasskey);</script>
{{end}}