{{define "title"}}Settings{{end}}
{{define "content"}}
<div style="padding:.5rem .875rem;border-bottom:1px solid #1f2937;background:#0d1117;flex-shrink:0">
  <span style="font-weight:600;color:#f9fafb;font-size:.875rem">Settings</span>
</div>

<div style="flex:1;overflow-y:auto;padding:1.25rem;max-width:40rem">

  <!-- Account info -->
  <div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1rem;margin-bottom:1rem">
    <div style="font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:.75rem">Account</div>
    <div style="font-size:.8125rem;color:#9ca3af;display:grid;grid-template-columns:auto 1fr;gap:.3rem .75rem">
      <span>Email</span><span style="color:#d1d5db">{{.AccountUser.Email}}</span>
      <span>Storage used</span><span style="color:#d1d5db">{{humanBytes .AccountUser.UsedBytes}} of {{if .AccountUser.QuotaBytes}}{{humanBytes .AccountUser.QuotaBytes}}{{else}}unlimited{{end}}</span>
    </div>
  </div>

  <!-- Display name -->
  <div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1rem;margin-bottom:1rem">
    <div style="font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:.75rem">Display Name</div>
    <form method="POST" action="/settings/display">
      <input type="hidden" name="_csrf" value="{{.CSRF}}">
      <div class="field">
        <label for="display_name">Display name shown in sent emails</label>
        <input type="text" id="display_name" name="display_name"
               value="{{.AccountUser.DisplayName}}" maxlength="255">
      </div>
      <button type="submit" class="btn btn-primary btn-sm">Save</button>
    </form>
  </div>

  <!-- Change password -->
  <div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1rem;margin-bottom:1rem">
    <div style="font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:.75rem">Change Password</div>
    <form method="POST" action="/settings/password">
      <input type="hidden" name="_csrf" value="{{.CSRF}}">
      <div class="field">
        <label>Current password</label>
        <input type="password" name="current_password" required maxlength="1024"
               autocomplete="current-password">
      </div>
      <div class="field">
        <label>New password (min 8 characters)</label>
        <input type="password" name="new_password" required minlength="8" maxlength="1024"
               autocomplete="new-password">
      </div>
      <div class="field">
        <label>Confirm new password</label>
        <input type="password" name="confirm_password" required maxlength="1024"
               autocomplete="new-password">
      </div>
      <button type="submit" class="btn btn-primary btn-sm"
              onclick="return confirm('Change your password? All other sessions will be logged out.')">
        Change password
      </button>
    </form>
  </div>

  <!-- Two-factor authentication -->
  <div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1rem">
    <div style="font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:.75rem">Two-Factor Authentication</div>
    {{if .AccountUser.MFAEnabled}}
    <p style="color:#6ee7b7;font-size:.8125rem;margin-bottom:.875rem">Two-factor authentication is enabled on your account.</p>
    <form method="POST" action="/settings/mfa/disable"
          onsubmit="return confirm('Disable two-factor authentication? This reduces your account security.')">
      <input type="hidden" name="_csrf" value="{{.CSRF}}">
      <div class="field">
        <label>Current password (required to disable)</label>
        <input type="password" name="password" required maxlength="1024" autocomplete="current-password">
      </div>
      <button type="submit" class="btn btn-danger btn-sm">Disable Two-Factor Auth</button>
    </form>
    {{else}}
    <p style="color:#9ca3af;font-size:.8125rem;margin-bottom:.875rem">
      Two-factor authentication is not enabled. Adding it significantly improves your account security.
    </p>
    <a href="/settings/mfa/enroll" class="btn btn-primary btn-sm">Set Up Two-Factor Auth</a>
    {{end}}
  </div>

</div>
{{end}}