Edit member profile - pronouns.cc

</div>
      <p class="text-muted mt-1">
        Using {charCount(bio)}/{MAX_DESCRIPTION_LENGTH} characters
      </p>
      <p class="text-muted my-2">
        <MarkdownHelp />
      </p>
      {#if bio}
        <hr />
        <Card>
          <CardHeader>Preview</CardHeader>
          <CardBody>
            {@html renderMarkdown(bio)}
          </CardBody>
        </Card>
      {/if}
    </div>
  </TabPane>
  <TabPane tabId="pronouns" tab="Pronouns">
    <div class="mt-3">
      <div class="col-md">
        {#each pronouns as _, index}
          <EditablePronouns
            bind:pronoun={pronouns[index]}
            preferences={data.user.custom_preferences}
            moveUp={() => movePronoun(index, true)}
            moveDown={() => movePronoun(index, false)}
            remove={() => removePronoun(index)}
          />
        {/each}
        <form class="input-group m-1" on:submit={addPronouns}>
          <input
            type="text"
            class="form-control"
            placeholder="New pronouns"
            bind:value={newPronouns}
            required
          />
          <IconButton
            type="submit"
            color="success"
            icon="plus"
            tooltip="Add pronouns"
            disabled={newPronouns === ""}
          />
          <Button id="pronouns-help" color="secondary"><Icon name="question" /></Button>
          <Popover target="pronouns-help" placement="bottom">
            For common pronouns, the short form (e.g. "she/her" or "he/him") is enough; for less
            common pronouns, you will have to use all five forms (e.g. "ce/cir/cir/cirs/cirself").
          </Popover>
        </form>
      </div>
    </div>
  </TabPane>
  <TabPane tabId="fields" tab="Fields">
    {#if data.member.fields.length === 0}
      <Alert class="mt-3" color="secondary" fade={false}>
        Fields are extra categories you can add separate from names and pronouns.<br />
        For example, you could use them for gender terms, honorifics, or compliments.
      </Alert>
    {/if}
    <div class="grid gap-3">
      <div class="row row-cols-1 row-cols-md-2">
        {#each fields as _, index}
          <EditableField
            bind:field={fields[index]}
            preferences={data.user.custom_preferences}
            deleteField={() => removeField(index)}
            moveField={(up) => moveField(index, up)}
          />
        {/each}
      </div>
    </div>
    <div>
      <Button on:click={() => (fields = [...fields, { name: "New field", entries: [] }])}>
        <Icon name="plus" aria-hidden /> Add new field
      </Button>
    </div>
  </TabPane>
  <TabPane tabId="flags" tab="Flags">
    <div class="mt-3">
      {#each flags as _, index}
        <ButtonGroup class="m-1">
          <IconButton
            icon="chevron-left"
            color="secondary"
            tooltip="Move flag to the left"
            click={() => moveFlag(index, true)}
          />
          <IconButton
            icon="chevron-right"
            color="secondary"
            tooltip="Move flag to the right"
            click={() => moveFlag(index, false)}
          />
          <FlagButton
            flag={flags[index]}
            tooltip="Remove this flag from your profile"
            on:click={() => removeFlag(index)}
          />
        </ButtonGroup>
      {/each}
    </div>
    <hr />
    <div class="row">
      <div class="col-md">
        <Input
          placeholder="Filter flags"
          bind:value={flagSearch}
          disabled={data.flags.length === 0}
        />
        <div class="p-2">
          {#each filteredFlags as flag (flag.id)}
            <FlagButton
              {flag}
              tooltip="Add this flag to your profile"
              on:click={() => addFlag(flag)}
            />
          {:else}
            {#if data.flags.length === 0}
              You haven't uploaded any flags yet.
            {:else}
              There are no flags matching your search <strong>{flagSearch}</strong>.
            {/if}
          {/each}
        </div>
      </div>
      <div class="col-md">
        <Alert color="secondary" fade={false}>
          {#if data.flags.length === 0}
            <p><strong>Why can't I see any flags?</strong></p>
            <p>
              There are thousands of pride flags, and it would be impossible to bundle all of them
              by default. Many labels also have multiple different flags that are favoured by
              different people. Because of this, there are no flags available by default--instead,
              you can upload flags in your <a href="/settings/flags">settings</a>. Your main profile
              and your member profiles can all have different flags.
            </p>
          {:else}
            To upload and delete flags, go to your <a href="/settings/flags">settings</a>.
          {/if}
        </Alert>
      </div>
    </div>
  </TabPane>
  <TabPane tabId="links" tab="Links">
    <div class="mt-3">
      {#each links as _, index}
        <div class="input-group m-1">
          <IconButton
            icon="chevron-up"
            color="secondary"
            tooltip="Move link up"
            click={() => moveLink(index, true)}
          />
          <IconButton
            icon="chevron-down"
            color="secondary"
            tooltip="Move link down"
            click={() => moveLink(index, false)}
          />
          <input type="text" class="form-control" bind:value={links[index]} />
          <IconButton
            color="danger"
            icon="trash3"
            tooltip="Remove link"
            click={() => removeLink(index)}
          />
        </div>
      {/each}
      <form class="input-group m-1" on:submit={addLink}>
        <input type="text" class="form-control" bind:value={newLink} />
        <IconButton type="submit" color="success" icon="plus" tooltip="Add link" />
      </form>
    </div>
  </TabPane>
  <TabPane tabId="other" tab="Other">
    <div class="row mt-3">
      <div class="col-md">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" bind:checked={unlisted} id="unlisted" />
          <label class="form-check-label" for="unlisted">Hide from member list</label>
        </div>
        <p class="text-muted mt-1">
          {#if data.user.list_private}
            <Icon name="exclamation-triangle-fill" aria-hidden />
            Your member list is currently hidden, so <strong>this setting has no effect</strong>. If
            you want to make your member list visible again,
            <a href="/edit/profile">edit your user profile</a>.
            <br />
          {/if}
          <Icon name="info-circle-fill" aria-hidden />
          This <em>only</em> hides this member from your member list.
          <strong>
            This member will still be visible to anyone at
            <code class="text-nowrap">pronouns.cc/@{data.user.name}/{data.member.name}</code>.
          </strong>
        </p>
      </div>
    </div>
  </TabPane>
</TabContent>

Edit member profile {#if modified} {/if}

Names

Edit member profile {#if modified} updateMember()} disabled={!memberNameValid} >Save changes {/if} Delete {data.member.display_name ?? data.member.name}

Names

Edit member profile {#if modified} {/if}