{{define "login"}}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sign In — MCIAS</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="login-wrapper">
  <div class="login-box">
    <div class="brand-heading">MCIAS</div>
    <div class="brand-subtitle">Metacircular Identity &amp; Access System</div>
    <div class="card" id="login-card">
      {{if .Error}}<div class="alert alert-error" role="alert">{{.Error}}</div>{{end}}
      <form id="login-form" method="POST" action="/login"
            hx-post="/login" hx-target="#login-card" hx-swap="outerHTML" hx-select="#login-card">
        <div class="form-group">
          <label for="username">Username</label>
          <input class="form-control" type="text" id="username" name="username"
                 autocomplete="username" required autofocus>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input class="form-control" type="password" id="password" name="password"
                 autocomplete="current-password" required>
        </div>
        <div class="form-actions">
          <button class="btn btn-primary" type="submit" style="width:100%">Sign in</button>
        </div>
      </form>
      {{if .WebAuthnEnabled}}
      <div style="margin-top:1rem;text-align:center">
        <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem">
          <hr style="flex:1;border:0;border-top:1px solid #ddd">
          <span class="text-muted text-small">or</span>
          <hr style="flex:1;border:0;border-top:1px solid #ddd">
        </div>
        <div id="webauthn-login-error" class="alert alert-error" style="display:none" role="alert"></div>
        <button class="btn btn-secondary" type="button" id="webauthn-login-btn" style="width:100%">
          Sign in with passkey
        </button>
      </div>
      {{end}}
    </div>
  </div>
</div>
<script src="/static/htmx.min.js"></script>
{{if .WebAuthnEnabled}}<script src="/static/webauthn.js"></script>{{end}}
</body>
</html>
{{end}}
