{{define "content"}}
{{$c := .Content}}
<section class="mb-4">
  <span class="text-uppercase small fw-semibold text-primary">Security</span>
  <h1 class="h2 fw-bold mt-2 mb-0">Enable OTP 2FA</h1>
</section>
{{with $c}}{{with .Error}}<div class="alert alert-danger">{{.}}</div>{{end}}{{end}}
<section class="card border-0 shadow-sm">
  <div class="card-body p-4">
    <div class="row g-4 align-items-center">
      <div class="col-md-4">
  <div class="qr-panel text-center p-3 bg-light rounded-4 border">
    <img alt="OTP QR code" src="{{with $c}}{{.QRCode}}{{end}}">
  </div>
      </div>
      <div class="col-md-8">
    <form method="post">
      <div class="mb-3">
        <label class="form-label">Manual secret</label>
        <input type="text" class="form-control" readonly value="{{with $c}}{{.Secret}}{{end}}">
      </div>
      <div class="mb-4">
        <label class="form-label">Authenticator code</label>
        <input type="text" class="form-control form-control-lg" name="code" inputmode="numeric" required>
      </div>
      <button type="submit" class="btn btn-primary"><i class="ti ti-shield-check me-2"></i>Enable 2FA</button>
    </form>
      </div>
    </div>
  </div>
</section>
{{end}}
