{{if .IsAuthenticated}}

<div class="account-container">
  {{if .Error}}
  <p class="form-error account-error" role="alert">{{.Error}}</p>
  {{end}}

  <section class="account-panel update-account" aria-labelledby="account-heading">
    <h2 id="account-heading">Update Account</h2>
    <form id="account-info" action="/account-update" method="post">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}" required />

      <label class="sr-only" for="name-update">Name</label>
      <input
        id="name-update"
        name="name-update"
        placeholder="name"
        value="{{.UserName}}"
        type="text"
        autocomplete="name"
        maxlength="200"
      />

      <label class="sr-only" for="email-update">Email</label>
      <input
        id="email-update"
        name="email-update"
        placeholder="email"
        value="{{.UserEmail}}"
        type="email"
        autocomplete="email"
        maxlength="254"
      />

      <label class="sr-only" for="password-update">New password</label>
      <input
        id="password-update"
        name="password-update"
        placeholder="new password"
        minlength="15"
        type="password"
        autocomplete="new-password"
        maxlength="1024"
      />

      <label class="sr-only" for="password-update_conf">New password confirmation</label>
      <input
        id="password-update_conf"
        name="password-update_conf"
        placeholder="new password confirmation"
        minlength="15"
        type="password"
        autocomplete="new-password"
        maxlength="1024"
      />

      <label class="sr-only" for="password">Current password</label>
      <input
        id="password"
        name="password"
        placeholder="current password"
        minlength="15"
        type="password"
        autocomplete="current-password"
        maxlength="1024"
        required
      />

      <button type="submit">Save account changes</button>
    </form>
  </section>

  <section class="account-panel appearance-container" id="appearance" aria-labelledby="appearance-heading">
    <h2 id="appearance-heading">Appearance</h2>
    <p class="partner-help">System follows your device preference. The light palette defaults to the existing pastel-purple Event-Tools theme; light and dark palettes can be customized independently.</p>
    <form action="/account/theme" method="post" class="theme-form">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
      <label for="theme-mode">Appearance</label>
      <select id="theme-mode" name="theme-mode">
        <option value="system" {{if eq .ThemeMode "system"}}selected{{end}}>System</option>
        <option value="light" {{if eq .ThemeMode "light"}}selected{{end}}>Light</option>
        <option value="dark" {{if eq .ThemeMode "dark"}}selected{{end}}>Dark</option>
      </select>
      <div class="theme-palettes">
        <fieldset><legend>Light palette</legend>
          <label>Page background <input type="color" name="theme-light-page-background" value="{{.ThemeLight.PageBackground}}" /></label>
          <label>Primary text <input type="color" name="theme-light-primary-text" value="{{.ThemeLight.PrimaryText}}" /></label>
          <label>Muted text <input type="color" name="theme-light-muted-text" value="{{.ThemeLight.MutedText}}" /></label>
          <label>Links <input type="color" name="theme-light-links" value="{{.ThemeLight.Links}}" /></label>
          <label>Panels <input type="color" name="theme-light-panels" value="{{.ThemeLight.Panels}}" /></label>
          <label>Panel borders <input type="color" name="theme-light-panel-borders" value="{{.ThemeLight.PanelBorders}}" /></label>
          <label>Inputs <input type="color" name="theme-light-inputs" value="{{.ThemeLight.Inputs}}" /></label>
          <label>Input borders <input type="color" name="theme-light-input-borders" value="{{.ThemeLight.InputBorders}}" /></label>
          <label>Primary buttons <input type="color" name="theme-light-primary-buttons" value="{{.ThemeLight.PrimaryButtons}}" /></label>
          <label>Button hover <input type="color" name="theme-light-button-hover" value="{{.ThemeLight.ButtonHover}}" /></label>
          <label>Secondary buttons <input type="color" name="theme-light-secondary-buttons" value="{{.ThemeLight.SecondaryButtons}}" /></label>
          <label>Danger buttons <input type="color" name="theme-light-danger-buttons" value="{{.ThemeLight.DangerButtons}}" /></label>
          <label>Danger text <input type="color" name="theme-light-danger-text" value="{{.ThemeLight.DangerText}}" /></label>
          <label>Soft backgrounds <input type="color" name="theme-light-soft-backgrounds" value="{{.ThemeLight.SoftBackgrounds}}" /></label>
          <label>Accent/focus <input type="color" name="theme-light-accent-focus" value="{{.ThemeLight.AccentFocus}}" /></label>
          <label>Dividers <input type="color" name="theme-light-dividers" value="{{.ThemeLight.Dividers}}" /></label>
        </fieldset>
        <fieldset><legend>Dark palette</legend>
          <label>Page background <input type="color" name="theme-dark-page-background" value="{{.ThemeDark.PageBackground}}" /></label>
          <label>Primary text <input type="color" name="theme-dark-primary-text" value="{{.ThemeDark.PrimaryText}}" /></label>
          <label>Muted text <input type="color" name="theme-dark-muted-text" value="{{.ThemeDark.MutedText}}" /></label>
          <label>Links <input type="color" name="theme-dark-links" value="{{.ThemeDark.Links}}" /></label>
          <label>Panels <input type="color" name="theme-dark-panels" value="{{.ThemeDark.Panels}}" /></label>
          <label>Panel borders <input type="color" name="theme-dark-panel-borders" value="{{.ThemeDark.PanelBorders}}" /></label>
          <label>Inputs <input type="color" name="theme-dark-inputs" value="{{.ThemeDark.Inputs}}" /></label>
          <label>Input borders <input type="color" name="theme-dark-input-borders" value="{{.ThemeDark.InputBorders}}" /></label>
          <label>Primary buttons <input type="color" name="theme-dark-primary-buttons" value="{{.ThemeDark.PrimaryButtons}}" /></label>
          <label>Button hover <input type="color" name="theme-dark-button-hover" value="{{.ThemeDark.ButtonHover}}" /></label>
          <label>Secondary buttons <input type="color" name="theme-dark-secondary-buttons" value="{{.ThemeDark.SecondaryButtons}}" /></label>
          <label>Danger buttons <input type="color" name="theme-dark-danger-buttons" value="{{.ThemeDark.DangerButtons}}" /></label>
          <label>Danger text <input type="color" name="theme-dark-danger-text" value="{{.ThemeDark.DangerText}}" /></label>
          <label>Soft backgrounds <input type="color" name="theme-dark-soft-backgrounds" value="{{.ThemeDark.SoftBackgrounds}}" /></label>
          <label>Accent/focus <input type="color" name="theme-dark-accent-focus" value="{{.ThemeDark.AccentFocus}}" /></label>
          <label>Dividers <input type="color" name="theme-dark-dividers" value="{{.ThemeDark.Dividers}}" /></label>
        </fieldset>
      </div>
      <div class="account-button-row">
        <button type="submit" name="theme-action" value="save">Save appearance</button>
        <button type="submit" name="theme-action" value="reset" class="secondary-button">Reset palettes to site defaults</button>
      </div>
    </form>
  </section>

  <section class="account-panel mfa-container" id="mfa" aria-labelledby="mfa-settings-heading">
    <h2 id="mfa-settings-heading">Authenticator MFA</h2>
    {{if .MFARecoveryCodes}}
    <div class="recovery-code-notice" role="status">
      <strong>Save these recovery codes now. They will not be shown again.</strong>
      <ul>{{range .MFARecoveryCodes}}<li><code>{{.}}</code></li>{{end}}</ul>
      <form action="/account/mfa/recovery/download" method="post" class="recovery-code-download-form">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
        {{range .MFARecoveryCodes}}<input type="hidden" name="recovery-code" value="{{.}}" />{{end}}
        <button type="submit" class="secondary-button">Download recovery codes (.txt)</button>
      </form>
    </div>
    {{end}}
    {{if .MFAEnrollmentSecret}}
      <p>Add this TOTP account to an authenticator app, then enter its current code to finish enrollment.</p>
      <p><strong>Secret:</strong> <code>{{.MFAEnrollmentSecret}}</code></p>
      <p class="mfa-uri"><strong>Provisioning URI:</strong> <code>{{.MFAEnrollmentURI}}</code></p>
      <form action="/account/mfa/enroll/confirm" method="post" class="security-form">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
        <label>Authenticator code <input name="totp-code" type="text" inputmode="numeric" autocomplete="one-time-code" minlength="6" maxlength="8" required /></label>
        <button type="submit">Enable MFA</button>
      </form>
    {{else if .MFAEnabled}}
      <p>MFA is enabled. {{.RecoveryCodeCount}} unused recovery codes remain.</p>
      <form action="/account/mfa/recovery/regenerate" method="post" class="security-form">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
        <label>Current password <input name="current-password" type="password" autocomplete="current-password" minlength="15" maxlength="1024" required /></label>
        <button type="submit">Regenerate recovery codes</button>
      </form>
      <form action="/account/mfa/disable" method="post" class="security-form">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
        <label>Current password <input name="current-password" type="password" autocomplete="current-password" minlength="15" maxlength="1024" required /></label>
        <button type="submit" class="danger-button">Disable MFA</button>
      </form>
    {{else}}
      <p>Use any RFC 6238 TOTP authenticator app. Enrollment requires your current password.</p>
      <form action="/account/mfa/enroll/start" method="post" class="security-form">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
        <label>Current password <input name="current-password" type="password" autocomplete="current-password" minlength="15" maxlength="1024" required /></label>
        <button type="submit">Start MFA enrollment</button>
      </form>
    {{end}}
  </section>

  <section class="account-panel partners-container" aria-labelledby="partners-heading">
    <h2 id="partners-heading">Partners</h2>

    {{if .PartnerInvitations}}
    <div class="partner-invitations" aria-labelledby="partner-invitations-heading">
      <h3 id="partner-invitations-heading">Link requests</h3>
      {{range .PartnerInvitations}}
      <article class="partner-row partner-invitation">
        <div class="partner-details">
          <strong>{{.FromName}}</strong>
          <span>{{.FromEmail}}</span>
          <span class="partner-status">pending your approval</span>
        </div>
        <div class="partner-actions">
          <form action="/partner-invite/accept" method="post">
            <input type="hidden" name="_csrf" value="{{$.CSRFToken}}" />
            <input type="hidden" name="invitation_id" value="{{.InvitationID}}" />
            <button type="submit">Accept</button>
          </form>
          <form action="/partner-invite/decline" method="post">
            <input type="hidden" name="_csrf" value="{{$.CSRFToken}}" />
            <input type="hidden" name="invitation_id" value="{{.InvitationID}}" />
            <button type="submit" class="secondary-button">Decline</button>
          </form>
        </div>
      </article>
      {{end}}
    </div>
    {{end}}

    <div class="partner-list">
      {{if .Partners}}
        {{range .Partners}}
        <article class="partner-row">
          <form action="/rm-partner" method="post" class="rm-partner-form">
            <input type="hidden" name="_csrf" value="{{$.CSRFToken}}" />
            <input type="hidden" name="partner_id" value="{{.PartnerID}}" />
            <button
              type="submit"
              class="rm-partner-btn"
              aria-label="Remove partner {{.Name}}"
              title="Remove partner"
            >
              &times;
            </button>
          </form>

          <div class="partner-details">
            <strong>{{.Name}}</strong>
            {{if .Email}}<span>{{.Email}}</span>{{end}}
            <span class="partner-status">{{.Status}}</span>
          </div>

          {{if .CanLink}}
          <form action="/link-partner" method="post" class="partner-link-form">
            <input type="hidden" name="_csrf" value="{{$.CSRFToken}}" />
            <input type="hidden" name="partner_id" value="{{.PartnerID}}" />
            <label class="sr-only" for="partner-link-email-{{.PartnerID}}">Partner email</label>
            <input
              id="partner-link-email-{{.PartnerID}}"
              name="partner-email"
              type="email"
              placeholder="Partner email to link account"
              autocomplete="email"
              maxlength="254"
              required
            />
            <button type="submit">Send link request</button>
          </form>
          {{end}}
        </article>
        {{end}}
      {{else}}
      <p class="empty-state">No partners added.</p>
      {{end}}
    </div>

    <form action="/add-partner" method="post" class="add-partner-form">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}" required />
      <label class="sr-only" for="partner-name">Partner name</label>
      <input
        id="partner-name"
        name="partner-name"
        type="text"
        placeholder="Partner name"
        autocomplete="off"
        maxlength="200"
        required
      />
      <label class="sr-only" for="partner-email">Partner email (optional)</label>
      <input
        id="partner-email"
        name="partner-email"
        type="email"
        placeholder="Partner email (optional)"
        autocomplete="email"
        maxlength="254"
      />
      <button type="submit">Add partner</button>
    </form>
    <p class="partner-help">
      Email is optional. Add a partner without an email now and send a link request later.
    </p>
  </section>

  <section class="account-panel account-data-controls" aria-labelledby="account-data-heading">
    <h2 id="account-data-heading">Data controls</h2>
    <p class="partner-help">Download the personal data Event-Tools currently stores for your account. The <code>.tar.xz</code> export includes account/relationship/payment-profile metadata and a complete Registry <code>.tar.xz</code> export for every Registry currently linked to your account.</p>
    <form action="/account/data-export" method="post" class="account-export-form">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
      <label for="account-export-password">Current password</label>
      <input id="account-export-password" name="account-export-password" type="password" autocomplete="current-password" minlength="15" maxlength="1024" required />
      <button type="submit">Export my account data (.tar.xz)</button>
    </form>

    <details class="account-delete-details">
      <summary>Delete my account permanently</summary>
      <p class="form-error">This cannot be undone. Your account, relationship links, and payment profiles are deleted. Shared registries remain with their other linked members; registries for which you are the final member are permanently deleted. Unreferenced managed thumbnails are removed.</p>
      <form action="/account/delete" method="post" class="account-delete-form">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
        <label for="account-delete-confirmation">Type <strong>DELETE {{.UserEmail}}</strong></label>
        <input id="account-delete-confirmation" name="account-delete-confirmation" type="text" autocomplete="off" required />
        <label for="account-delete-password">Current password</label>
        <input id="account-delete-password" name="account-delete-password" type="password" autocomplete="current-password" minlength="15" maxlength="1024" required />
        <label class="account-delete-confirm"><input type="checkbox" name="confirm-account-delete" value="yes" required /> I understand that account deletion is permanent.</label>
        <button type="submit" class="danger-button">Delete account permanently</button>
      </form>
    </details>
  </section>

  <section class="account-panel payment-profiles-container" aria-labelledby="payment-profiles-heading">
    <h2 id="payment-profiles-heading">Payment profiles</h2>
    <p class="partner-help">Save external payment handles/links that cash gifts may offer. Event-Tools only links visitors to these services; it does not process or hold the payment.</p>

    {{if .PaymentProfiles}}
    <div class="payment-profile-list">
      {{range .PaymentProfiles}}
      <article class="payment-profile-row">
        <div class="partner-details">
          <strong>{{.ProviderLabel}}</strong>
          <span>{{.Handle}}</span>
          <a href="{{.PaymentURL}}" target="_blank" rel="noopener noreferrer">{{.PaymentURL}}</a>
        </div>
        <form action="/payment-profile/delete" method="post" class="payment-profile-delete-form">
          <input type="hidden" name="_csrf" value="{{$.CSRFToken}}" />
          <input type="hidden" name="payment-profile-id" value="{{.ID}}" />
          <label class="payment-profile-delete-confirm"><input type="checkbox" name="confirm-delete" value="yes" required /> Confirm removal</label>
          <button type="submit" class="secondary-button">Remove</button>
        </form>
      </article>
      {{end}}
    </div>
    {{else}}
    <p class="empty-state">No payment profiles saved.</p>
    {{end}}

    <form action="/payment-profile/add" method="post" class="payment-profile-add-form">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}" />
      <label for="provider-key">Service</label>
      <select id="provider-key" name="provider-key" required>
        <option value="cash_app">Cash App</option>
        <option value="venmo">Venmo</option>
        <option value="paypal">PayPal</option>
        <option value="custom">Custom / other</option>
      </select>
      <label for="provider-name">Custom service name (only for Custom)</label>
      <input id="provider-name" name="provider-name" type="text" maxlength="50" placeholder="Zelle or another service" />
      <label for="payment-handle">Handle / account label</label>
      <input id="payment-handle" name="payment-handle" type="text" maxlength="100" placeholder="$cashtag, @username, or account label" required />
      <label for="payment-url">HTTPS payment profile / payment link</label>
      <input id="payment-url" name="payment-url" type="url" maxlength="2048" placeholder="https://..." autocomplete="url" required />
      <button type="submit">Add payment profile</button>
    </form>
  </section>
</div>

{{else}}
<a href="/sign-in" class="signin-btn"> Sign-in / Register</a>
{{end}}