Edit profile - pronouns.cc

</div>
      <p class="text-muted mt-1">
        Using {bio.length}/{MAX_DESCRIPTION_LENGTH} characters
      </p>
      <p class="text-muted my-2">
        <Icon name="info-circle-fill" aria-hidden /> Your bio supports limited
        <a
          class="text-reset"
          href="https://commonmark.org/help/"
          target="_blank"
          rel="noopener noreferrer">Markdown</a
        >.
      </p>
      <hr />
      <Card>
        <CardHeader>Preview</CardHeader>
        <CardBody>
          {@html renderMarkdown(bio)}
        </CardBody>
      </Card>
    </div>
  </TabPane>
  <TabPane tabId="pronouns" tab="Pronouns">
    <div class="mt-3">
      <div class="col-md">
        {#each pronouns as _, index}
          <EditablePronouns
            bind:pronoun={pronouns[index]}
            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]}
            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="Other">
    <div class="mt-3">
      <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 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 />
        If this is checked, your member list will be hidden from other users.
        <strong>This will not make any of your members' pages or information private.</strong>
      </p>
    </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}