{{define "totp_section"}}
<div id="totp-section">
  {{if .TOTPSuccess}}<div class="alert alert-success" role="alert">{{.TOTPSuccess}}</div>{{end}}
  {{if .TOTPEnabled}}
    <p class="text-small" style="margin-bottom:.5rem">
      <span style="color:var(--color-success,#27ae60);font-weight:600">&#x2713; Enabled</span>
    </p>
    <p class="text-muted text-small">To remove TOTP, contact an administrator.</p>
  {{else}}
    <p class="text-muted text-small" style="margin-bottom:.75rem">
      Add a time-based one-time password for two-factor authentication.
    </p>
    {{if .TOTPError}}<div class="alert alert-error" role="alert">{{.TOTPError}}</div>{{end}}
    <form hx-post="/profile/totp/enroll"
          hx-target="#totp-section"
          hx-swap="outerHTML"
          hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
      <div class="form-group">
        <label for="totp-enroll-password">Current Password</label>
        <input type="password" id="totp-enroll-password" name="password"
               class="form-control" autocomplete="current-password" required>
      </div>
      <button type="submit" class="btn btn-primary btn-sm" style="margin-top:.5rem">
        Set Up Authenticator
      </button>
    </form>
  {{end}}
</div>
{{end}}