{{define "title"}}Account settings · MeshTender{{end}}
{{define "header"}}
<div class="row g-2 align-items-center">
  <div class="col">
    <div class="page-pretitle">Your account</div>
    <h1 class="page-title fs-1">Account settings</h1>
  </div>
</div>
{{end}}
{{/* Four cards, in the order people reason about them: what the world sees, then
     how the app treats you, then how you get in, then how you leave.

     Public profile is one form with one Save — every field on it is part of the
     same public page. Sign-in & security is the opposite shape: a row per
     credential, each stating its current state and hiding its own form behind a
     toggle, because those saves are genuinely separate acts and a page that shows
     four expanded forms at once buries the one fact people came for (do I have a
     password? is my email confirmed?).

     Public-profile fields carry no per-field "optional" tag: every field in that
     card is optional, and the subtitle already says so ("Leave a field blank to
     keep it off your page"). Four right-aligned repeats of the same word read as
     clutter, not information. */}}
{{define "content"}}
{{if .Error}}<div class="alert alert-danger">{{.Error}}</div>{{end}}
{{if .OK}}<div class="alert alert-success">{{.OK}}</div>{{end}}

<div class="card">
  <div class="card-header">
    <div>
      <h2 class="card-title fs-2 fw-bold">Public profile</h2>
      <p class="card-subtitle">Everything here appears on <a href="{{.RootURL}}/u/{{.User.Username}}" target="_blank" rel="noopener">{{.RootURL}}/u/{{.User.Username}}</a>, which anyone can view. Leave a field blank to keep it off your page.</p>
    </div>
  </div>
  {{/* One form for the whole card: these fields are a single public page, and
       splitting them into three saves let someone rewrite their profile and walk
       away having stored a third of it. The link editor's data-link-editor hook
       goes on this form too — link-editor.js finds its rows from there. */}}
  <form method="post" action="/account/profile" data-link-editor>
    <div class="card-body">
      <div class="mb-3">
        <label class="form-label" for="acct_display_name">Display name</label>
        <input type="text" class="form-control" id="acct_display_name" name="display_name" maxlength="64" value="{{if .DisplayName}}{{.DisplayName}}{{end}}" placeholder="Shown to people you share with">
        <small class="form-hint">What other people see — on shares and in organizations. It can be anything, and it isn't tied to sign-in.</small>
      </div>
      <div class="mb-3">
        <label class="form-label" for="acct_bio">Bio</label>
        <textarea class="form-control" id="acct_bio" name="bio" rows="3" maxlength="500" placeholder="A short blurb about you">{{.Bio}}</textarea>
      </div>
      <div class="row g-3">
        <div class="col-md">
          <label class="form-label" for="acct_location">Location</label>
          <input type="text" class="form-control" id="acct_location" name="location" maxlength="120" value="{{.Location}}" placeholder="General area you operate in">
        </div>
        <div class="col-md">
          <label class="form-label" for="acct_callsign">Callsign</label>
          <input type="text" class="form-control" id="acct_callsign" name="callsign" maxlength="32" value="{{.Callsign}}" placeholder="e.g. KD2ABC">
        </div>
      </div>

      <hr class="my-4">

      <h3 class="mb-1">Links</h3>
      <p class="text-secondary">Ways to reach or find you — social media, a website, or your MeshCore public key (shown as a QR code). Mark one non-MeshCore link as your <strong>primary contact</strong> so people know the best way to reach you.</p>
      <div data-link-rows>
        {{range $i, $l := .Links}}
        <div class="link-row row g-2 mb-2 align-items-center">
          <div class="col-12 col-sm-3">
            <select class="form-select link-platform" name="link_platform" aria-label="Link type">
              {{$sel := $l.Platform}}
              {{range $.Platforms}}<option value="{{.Key}}"{{if eq .Key $sel}} selected{{end}}>{{.Name}}</option>{{end}}
            </select>
          </div>
          <div class="col-12 col-sm-3 link-label-col">
            <input class="form-control link-label" name="link_label" value="{{$l.Label}}" maxlength="60" placeholder="Label (optional)" aria-label="Link label">
          </div>
          <div class="col">
            <input class="form-control link-value" type="text" name="link_url" value="{{$l.URL}}" maxlength="300" aria-label="Link value">
          </div>
          <div class="col-auto">
            <label class="form-check form-check-inline m-0" title="Primary contact">
              <input class="form-check-input" type="radio" name="link_primary" value="{{$i}}"{{if $l.IsPrimary}} checked{{end}}>
              <span class="form-check-label">Primary</span>
            </label>
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-ghost-danger btn-icon remove-link" aria-label="Remove link">{{template "icon-trash" ""}}</button>
          </div>
        </div>
        {{end}}
      </div>
      <div class="mt-2">
        <button type="button" class="btn" data-link-add>{{template "icon-plus" "me-1"}}Add link</button>
      </div>
      <template data-link-tpl>
        <div class="link-row row g-2 mb-2 align-items-center">
          <div class="col-12 col-sm-3">
            <select class="form-select link-platform" name="link_platform" aria-label="Link type">
              {{range .Platforms}}<option value="{{.Key}}">{{.Name}}</option>{{end}}
            </select>
          </div>
          <div class="col-12 col-sm-3 link-label-col">
            <input class="form-control link-label" name="link_label" maxlength="60" placeholder="Label (optional)" aria-label="Link label">
          </div>
          <div class="col">
            <input class="form-control link-value" type="text" name="link_url" maxlength="300" aria-label="Link value">
          </div>
          <div class="col-auto">
            <label class="form-check form-check-inline m-0" title="Primary contact">
              <input class="form-check-input" type="radio" name="link_primary" value="">
              <span class="form-check-label">Primary</span>
            </label>
          </div>
          <div class="col-auto">
            <button type="button" class="btn btn-ghost-danger btn-icon remove-link" aria-label="Remove link">{{template "icon-trash" ""}}</button>
          </div>
        </div>
      </template>
    </div>
    <div class="card-footer d-flex">
      <button type="submit" class="btn btn-primary ms-auto" data-testid="profile-save">Save profile</button>
    </div>
  </form>
</div>

<div class="card mt-3">
  <div class="card-header">
    <div>
      <h2 class="card-title fs-2 fw-bold">Preferences</h2>
      <p class="card-subtitle">How MeshTender presents things to you.</p>
    </div>
  </div>
  {{/* Same shape as Public profile — fields in the body, one Save in the footer —
       so the two editable cards on this page behave alike. Time zone is the only
       preference today; the footer is what keeps that from needing a rewrite when
       there are three. */}}
  <form method="post" action="/account/timezone">
    <div class="card-body">
      <div>
        <label class="form-label" for="acct_timezone">Time zone</label>
        {{/* The full IANA list is filled in by timezone-picker.js from the
             browser's own Intl database. These options are the no-JS fallback
             and preserve the current value on round-trip. data-current carries
             the saved zone so the script can reselect it. */}}
        <select class="form-select" id="acct_timezone" name="timezone" data-tz-picker data-current="{{.Timezone}}">
          <option value=""{{if not .Timezone}} selected{{end}}>Auto-detect (browser)</option>
          {{if .Timezone}}<option value="{{.Timezone}}" selected>{{.Timezone}}</option>{{end}}
        </select>
        <small class="form-hint">Dates and times are shown in this zone, in your browser's locale format. <strong>Auto-detect</strong> uses whatever zone your browser reports.</small>
        <small class="form-hint" data-tz-detected></small>
      </div>
    </div>
    <div class="card-footer d-flex">
      <button type="submit" class="btn btn-primary ms-auto" data-testid="preferences-save">Save preferences</button>
    </div>
  </form>
</div>

{{/* Sign-in & security is a list of rows rather than stacked forms: each row
     states what's configured right now (the answer to the question people
     actually arrive with) and hides its controls behind a toggle. Username and
     email live here because both are credentials — one identifies the account at
     sign-in, the other is how it's recovered — not because they're settings.

     A row auto-expands when it carries a flash message, so the result of a save
     is never hidden behind a collapsed panel. */}}
<div class="card mt-3">
  <div class="card-header">
    <div>
      <h2 class="card-title fs-2 fw-bold">Sign-in &amp; security</h2>
      <p class="card-subtitle">How you get into this account, and how you get back in. Keep at least one sign-in method that works.</p>
    </div>
  </div>
  <div class="list-group list-group-flush">

    <div class="list-group-item">
      <div class="row g-3 align-items-center">
        <div class="col-auto text-secondary">{{template "icon-user" ""}}</div>
        <div class="col" style="min-width:0">
          <h3 class="mb-0">Username</h3>
          <div class="text-secondary text-truncate">@{{.User.Username}}</div>
        </div>
        <div class="col-auto">
          <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#sec-username"
                  aria-expanded="false" aria-controls="sec-username" data-testid="manage-username">Manage</button>
        </div>
      </div>
      <div class="collapse" id="sec-username">
        <div class="row-panel pt-3">
          <p class="text-secondary">3–32 characters: letters, digits, <code>_ . -</code>. It's also the address of your public page. You can change it once every 30 days; your old username is then reserved for 90 days before anyone else can take it.</p>
          <form method="post" action="/account/username">
            <div class="row g-3 align-items-end">
              <div class="col-md">
                <label class="form-label" for="acct_username">Username</label>
                <div class="input-group input-group-flat">
                  <span class="input-group-text">@</span>
                  <input type="text" class="form-control" id="acct_username" name="username" minlength="3" maxlength="32" pattern="[a-zA-Z0-9_.\-]+" value="{{.User.Username}}" {{if .NextRename}}disabled{{end}}>
                </div>
              </div>
              <div class="col-md-auto">
                <button type="submit" class="btn btn-primary" {{if .NextRename}}disabled{{end}}>Change username</button>
              </div>
            </div>
            {{if .NextRename}}
            <small class="form-hint mt-2 d-block">You changed your username recently. You can change it again on {{ts .NextRename "date"}}.</small>
            {{end}}
          </form>
        </div>
      </div>
    </div>

    {{/* Email row. Hidden entirely when no mail provider is configured: an address we
         can't send to would be a promise we can't keep. What it SAYS depends on three
         things — whether an address is set, whether it's confirmed, and whether there's
         a password to reset — because a passkey-only account's address genuinely can't
         recover it, and implying otherwise is the one thing worse than silence. */}}
    {{if .MailEnabled}}
    <div class="list-group-item">
      <div class="row g-3 align-items-center">
        <div class="col-auto text-secondary">{{template "icon-mail" ""}}</div>
        <div class="col" style="min-width:0">
          <h3 class="mb-0">Email <span class="text-secondary fw-normal">(private)</span></h3>
          <div class="text-secondary text-truncate">
            {{if .Email}}
              {{.Email}}
              {{if .EmailVerified}}<span class="badge bg-success-lt">confirmed</span>{{else}}<span class="badge bg-yellow-lt">unconfirmed</span>{{end}}
            {{else}}Not set — no way to recover this account{{end}}
          </div>
        </div>
        <div class="col-auto">
          <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#sec-email"
                  aria-expanded="{{if or .EmErr .EmMsg}}true{{else}}false{{end}}" aria-controls="sec-email" data-testid="manage-email">Manage</button>
        </div>
      </div>
      <div class="collapse{{if or .EmErr .EmMsg}} show{{end}}" id="sec-email">
        <div class="row-panel pt-3">
          <p class="text-secondary">
            Optional. Used to recover your account if you forget your password. It's never shown
            on your public profile, and we only email you about your account — never marketing.
          </p>
          {{if .EmErr}}<div class="alert alert-danger">{{.EmErr}}</div>{{end}}
          {{if .EmMsg}}<div class="alert alert-success">{{.EmMsg}}</div>{{end}}

          {{if .Email}}
          <div class="d-flex align-items-center gap-3 mb-3">
            <div class="flex-fill text-secondary small" style="min-width:0">
              {{if .EmailVerified}}
                {{if .CanResetByMail}}
                You can reset your password by email.
                {{else}}
                This account has no password, so there's nothing to reset — sign-in is by passkey only.
                To keep access if you lose your device, add a passkey on a second device.
                {{end}}
              {{else}}
              Check your inbox for the confirmation link. Until it's confirmed, this address can't recover your account.
              {{end}}
            </div>
            {{if not .EmailVerified}}
            <form method="post" action="/account/email/verify" class="m-0">
              <button type="submit" class="btn btn-sm" data-testid="email-resend">Resend</button>
            </form>
            {{end}}
            <form method="post" action="/account/email" class="m-0" data-confirm="Remove your email address? If you forget your password, it can't be reset without one.">
              <input type="hidden" name="remove" value="1">
              <button type="submit" class="btn btn-sm btn-ghost-danger" data-testid="email-remove">Remove</button>
            </form>
          </div>
          {{end}}

          <form method="post" action="/account/email">
            <div class="row g-2 align-items-end">
              <div class="col-sm">
                <label class="form-label" for="email">{{if .Email}}Change address{{else}}Email address{{end}}</label>
                <input type="email" class="form-control" id="email" name="email" autocomplete="email" autocapitalize="none" maxlength="254" placeholder="you@example.com" required>
              </div>
              <div class="col-sm-auto">
                <button type="submit" class="btn btn-primary w-100" data-testid="email-save">{{if .Email}}Save new address{{else}}Save address{{end}}</button>
              </div>
            </div>
            <small class="form-hint mt-1">We'll send a confirmation link. A new address has to be confirmed before it can recover your account.</small>
          </form>
        </div>
      </div>
    </div>
    {{end}}

    <div class="list-group-item">
      <div class="row g-3 align-items-center">
        <div class="col-auto text-secondary">{{template "icon-key" ""}}</div>
        <div class="col" style="min-width:0">
          <h3 class="mb-0">Passkeys</h3>
          <div class="text-secondary">
            {{if .Passkeys}}
            {{/* Underlined at rest, not just on hover, plus a chevron that flips with
                 aria-expanded: a summary line that only looks like a link when you're
                 already pointing at it isn't discoverable. */}}
            <button class="btn btn-link p-0 text-secondary text-decoration-underline" type="button" data-bs-toggle="collapse" data-bs-target="#sec-passkey-list"
                    aria-expanded="{{if or .PKErr .PKMsg}}true{{else}}false{{end}}" aria-controls="sec-passkey-list" data-testid="passkey-list-toggle">
              {{if eq (len .Passkeys) 1}}1 passkey configured{{else}}{{len .Passkeys}} passkeys configured{{end}}{{template "icon-chevron-down" "collapse-chevron ms-1"}}
            </button>
            {{else}}Not set up — sign in is by password only{{end}}
          </div>
        </div>
        <div class="col-auto">
          <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#sec-passkey-add"
                  aria-expanded="false" aria-controls="sec-passkey-add" data-testid="manage-passkeys">Add passkey</button>
        </div>
      </div>

      {{if or .PKErr .PKMsg}}
      <div class="row-panel pt-3">
        {{if .PKErr}}<div class="alert alert-danger mb-0">{{.PKErr}}</div>{{end}}
        {{if .PKMsg}}<div class="alert alert-success mb-0">{{.PKMsg}}</div>{{end}}
      </div>
      {{end}}

      {{if .Passkeys}}
      <div class="collapse{{if or .PKErr .PKMsg}} show{{end}}" id="sec-passkey-list">
        <div class="list-group list-group-flush row-panel pt-2">
          {{range .Passkeys}}
          <div class="list-group-item d-flex align-items-center gap-3 px-0">
            <div class="flex-fill" style="min-width:0">
              <div class="text-truncate">{{if .Name}}{{.Name}}{{else}}<span class="text-secondary fst-italic">Unnamed passkey</span>{{end}}</div>
              <div class="text-secondary small"><span class="font-monospace">{{.ShortID}}…</span> · Added {{ts .Added "date"}}</div>
            </div>
            <button type="button" class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#rename-passkey" data-id="{{.ID}}" data-name="{{.Name}}">Rename</button>
            <form method="post" action="/account/passkeys/delete" class="m-0" data-confirm="Remove this passkey? You won't be able to sign in with it anymore.">
              <input type="hidden" name="credential_id" value="{{.ID}}">
              <button type="submit" class="btn btn-sm btn-ghost-danger">Remove</button>
            </form>
          </div>
          {{end}}
        </div>
      </div>
      {{end}}

      <div class="collapse" id="sec-passkey-add">
        <div class="row-panel pt-3">
          <p class="text-secondary">Passkeys let you sign in with your device's fingerprint, face, or PIN — no password to remember or leak.</p>
          <div class="row g-2 align-items-end">
            <div class="col-sm">
              <label class="form-label" for="new_passkey_name">Description <span class="form-label-description">optional</span></label>
              <input type="text" class="form-control" id="new_passkey_name" maxlength="64" placeholder="e.g. MacBook Touch ID">
            </div>
            <div class="col-sm-auto">
              <button type="button" class="btn btn-primary w-100" id="add-passkey-btn">{{template "icon-key" "me-1"}}Add a passkey</button>
            </div>
          </div>
          <p id="passkey-status" class="text-secondary small mt-2 mb-0" style="min-height:1.2em"></p>
        </div>
      </div>
    </div>

    <div class="list-group-item">
      <div class="row g-3 align-items-center">
        <div class="col-auto text-secondary">{{template "icon-lock" ""}}</div>
        <div class="col" style="min-width:0">
          <h3 class="mb-0">Password</h3>
          <div class="text-secondary">{{if .HasPassword}}Configured{{else}}Not set — sign in is by passkey only{{end}}</div>
        </div>
        <div class="col-auto">
          <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#sec-password"
                  aria-expanded="false" aria-controls="sec-password" data-testid="manage-password">{{if .HasPassword}}Change password{{else}}Set password{{end}}</button>
        </div>
      </div>
      <div class="collapse" id="sec-password">
        <div class="row-panel pt-3">
          {{if not .HasPassword}}
          <p class="text-secondary">A password is a fallback for when you can't use a passkey.</p>
          {{end}}
          <form method="post" action="/account/password">
            {{/* Current → new → confirm, stacked in that order: the arrangement every
                 password form uses, so nobody has to read it to know what it wants. */}}
            {{if .HasPassword}}
            <div class="mb-3">
              <label class="form-label" for="cur_pw">Current password</label>
              <div class="input-group input-group-flat">
                <input type="password" class="form-control" id="cur_pw" name="current_password" autocomplete="current-password" required>
                <span class="input-group-text"><button type="button" class="link-secondary border-0 bg-transparent p-0" aria-pressed="false" title="Show password" data-pwtoggle="cur_pw" aria-label="Show password">{{template "icon-eye" ""}}</button></span>
              </div>
            </div>
            {{end}}
            <div class="mb-3">
              <label class="form-label" for="new_pw">{{if .HasPassword}}New password{{else}}Password{{end}} <span class="form-label-description">min {{.MinPasswordLen}} characters</span></label>
              <div class="input-group input-group-flat">
                <input type="password" class="form-control" id="new_pw" name="new_password" autocomplete="new-password" minlength="{{.MinPasswordLen}}" required>
                <span class="input-group-text"><button type="button" class="link-secondary border-0 bg-transparent p-0" aria-pressed="false" title="Show password" data-pwtoggle="new_pw" aria-label="Show password">{{template "icon-eye" ""}}</button></span>
              </div>
            </div>
            <div class="mb-3">
              <label class="form-label" for="confirm_pw">Confirm {{if .HasPassword}}new {{end}}password</label>
              <div class="input-group input-group-flat">
                <input type="password" class="form-control" id="confirm_pw" name="confirm_password" autocomplete="new-password" minlength="{{.MinPasswordLen}}" required>
                <span class="input-group-text"><button type="button" class="link-secondary border-0 bg-transparent p-0" aria-pressed="false" title="Show password" data-pwtoggle="confirm_pw" aria-label="Show password">{{template "icon-eye" ""}}</button></span>
              </div>
            </div>
            <button type="submit" class="btn btn-primary">{{if .HasPassword}}Change password{{else}}Set password{{end}}</button>
          </form>

          {{if .HasPassword}}
          <hr class="my-4">
          {{/* Removing a password takes a fresh passkey assertion, not just a click:
               it is the one action here that permanently narrows how you can get back
               in, and a live session only proves somebody signed in at some point.
               The confirm text names the recovery consequence too — email reset only
               ever sets a password on an account that HAS one, so removing it silently
               turns a working recovery path into a dead end. */}}
          <form method="post" action="/account/password" id="remove-password-form"
                data-confirm="Remove your password? You'll sign in with a passkey only — and email recovery will no longer apply to this account, since there'd be no password to reset.">
            <input type="hidden" name="remove" value="1">
          </form>
          {{if .Passkeys}}
          <button type="button" class="btn btn-ghost-danger" data-reauth
                  data-form="remove-password-form" data-status="remove-pw-status" data-testid="remove-password">
            {{template "icon-key" "me-1"}}Verify with passkey and remove password
          </button>
          <div class="text-secondary small mt-2" id="remove-pw-status" role="status" aria-live="polite" style="min-height:1.2em"></div>
          {{else}}
          <button type="button" class="btn btn-ghost-danger" disabled>Remove password</button>
          <small class="form-hint mt-1">Add a passkey first — it would otherwise be your only way to sign in.</small>
          {{end}}
          {{end}}
        </div>
      </div>
    </div>

  </div>
</div>

{{/* Deletion is a page, not a button here: what it removes depends on what you
     own, and that has to be shown before anyone commits to it. */}}
<div class="card mt-3 border-danger">
  <div class="card-header"><h2 class="card-title fs-2 fw-bold text-danger">Delete account</h2></div>
  <div class="card-body">
    <p class="text-secondary">
      Permanently delete your account, your public profile, and the repeaters you own. This can't be
      undone — the next page shows exactly what would go, and lets you hand any repeater to a steward
      first.
    </p>
    <a class="btn btn-outline-danger" href="/account/delete" data-testid="delete-account">
      {{template "icon-trash" "me-1"}}Delete my account…
    </a>
  </div>
</div>

<!-- Rename-passkey modal: populated from the clicked row's data-* attributes. -->
<div class="modal modal-blur fade" id="rename-passkey" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <form method="post" action="/account/passkeys/rename">
        <div class="modal-header">
          <h2 class="modal-title">Rename passkey</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="credential_id" id="rename-id">
          <label class="form-label" for="rename-name">Description <span class="form-label-description">optional</span></label>
          <input type="text" class="form-control" name="name" id="rename-name" maxlength="64" placeholder="e.g. MacBook Touch ID" autocomplete="off">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script nonce="{{.Nonce}}">
  // Fill the rename modal from the passkey row that opened it.
  document.getElementById("rename-passkey").addEventListener("show.bs.modal", function (e) {
    var btn = e.relatedTarget;
    if (!btn) return;
    document.getElementById("rename-id").value = btn.getAttribute("data-id");
    document.getElementById("rename-name").value = btn.getAttribute("data-name") || "";
  });
</script>
<script nonce="{{.Nonce}}">window.MESHTENDER_LINK_PLATFORMS = {{.PlatformsJS}};</script>
<script src="{{ asset "/static/link-editor.js" }}"></script>
<script src="{{ asset "/static/timezone-picker.js" }}"></script>
<script src="{{ asset "/static/webauthn.js" }}"></script>
{{end}}