{{define "content"}}
{{$c := .Content}}
<section class="mb-4">
  <span class="text-uppercase small fw-semibold text-primary"><i class="ti ti-shield-lock me-1"></i>Security</span>
  <h1 class="h2 fw-bold mt-2 mb-0"><i class="ti ti-device-mobile me-2"></i>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"><i class="ti ti-key me-2"></i>Manual secret</label>
            <input type="text" class="form-control" readonly value="{{with $c}}{{.Secret}}{{end}}">
          </div>
          <div class="mb-4">
            <label class="form-label"><i class="ti ti-lock-password me-2"></i>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}}
