Edit 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={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.user.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={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="links" tab="Links">
    <div class="mt-3">
      {#each links as _, index}
        <div class="input-group m-1">
          <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="Preferences & other">
    <div class="row mt-3">
      <div class="col-md">
        <FormGroup floating label={'"Members" header text'}>
          <Input bind:value={member_title} placeholder="Members" />
          <p class="text-muted mt-1">
            <Icon name="info-circle-fill" aria-hidden />
            This is the text used for the "Members" heading. If you leave it blank, the default text
            will be used.
          </p>
        </FormGroup>
      </div>
      <div class="col-md">
        <div class="form-check">
          <input
            class="form-check-input"
            type="checkbox"
            bind:checked={list_private}
            id="listPrivate"
          />
          <label class="form-check-label" for="listPrivate">Hide member list</label>
        </div>
        <p class="text-muted mt-1">
          <Icon name="info-circle-fill" aria-hidden />
          This only hides your member <em>list</em>.
          <strong>
            Your members will still be visible to anyone at
            <code class="text-nowrap">pronouns.cc/@{data.user.name}/[member-name]</code>.
          </strong>
        </p>
      </div>
    </div>
    <div>
      <h3>
        Preferences <Button on:click={addPreference} color="success"
          ><Icon name="plus" aria-hidden /> Add new</Button
        >
      </h3>
      {#each preferenceIds as id}
        <CustomPreference
          bind:preference={custom_preferences[id]}
          remove={() => removePreference(id)}
        />
      {/each}
    </div>
  </TabPane>
</TabContent>

Edit profile {#if modified} {/if}

Names

Edit profile Back to your profile {#if modified} updateUser()}>Save changes {/if}

Names

Edit profile {#if modified} {/if}