{{define "content"}}
<section class="panel">
  <h2>Account</h2>
  {{if .MustChangePassword}}
  <p class="notice">You're signed in with the default admin/admin login — set your own username and password below to continue.</p>
  {{end}}
  <p class="status">Signed in as <strong>{{.Username}}</strong>.</p>
  {{if .Error}}<p class="notice error">{{.Error}}</p>{{end}}
  <form method="post" action="/account/credentials" class="form">
    <label>Current Password <input type="password" name="current_password" autocomplete="current-password" required></label>
    <label>New Username <input type="text" name="new_username" value="{{.Username}}" maxlength="32" required></label>
    <label>New Password <input type="password" name="new_password" autocomplete="new-password" minlength="8" required></label>
    <label>Confirm New Password <input type="password" name="confirm_password" autocomplete="new-password" minlength="8" required></label>
    <button type="submit">Save</button>
  </form>
  <p class="hint">Username: 3-32 characters (letters, numbers, dot, underscore, hyphen). Password: at least 8 characters.</p>
</section>

<section class="panel">
  <h2>Two-Factor Authentication (MFA)</h2>
  {{if .MFAError}}<p class="notice error">{{.MFAError}}</p>{{end}}
  {{if .MFAEnabled}}
  <p class="status ok">MFA is enabled — an authenticator code is required at sign-in.</p>
  <form method="post" action="/account/mfa/disable">
    <button type="submit" class="toggle is-hidden">Disable MFA</button>
  </form>
  {{else if .MFAPendingSecret}}
  <p class="status">Scan this with your authenticator app (Google Authenticator, Authy, 1Password, etc.), or enter the key manually, then enter the 6-digit code it shows to confirm:</p>
  {{if .MFAQRDataURI}}<img src="{{.MFAQRDataURI}}" alt="MFA setup QR code" class="qr-code">{{end}}
  <p class="mono secret-key">{{.MFAPendingSecret}}</p>
  <p class="hint">otpauth URI: <span class="mono">{{.MFAOtpauthURI}}</span></p>
  <form method="post" action="/account/mfa/confirm" class="form">
    <label>6-digit code <input type="text" name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required></label>
    <button type="submit">Confirm</button>
  </form>
  <form method="post" action="/account/mfa/disable">
    <button type="submit" class="toggle">Cancel setup</button>
  </form>
  {{else}}
  <p class="status">MFA is not enabled. 1 user account is currently supported.</p>
  <form method="post" action="/account/mfa/enable">
    <button type="submit">Enable MFA</button>
  </form>
  {{end}}
</section>
{{end}}