Edit profile - pronouns.cc

Avatar

{#if avatar}

{:else} {/if}

</FormGroup>
        </div>
      </div>
    </div>
    <div class="row m-1">
      <div class="col-md">
        <h4>Names</h4>
        {#each names as _, index}
          <div class="input-group m-1">
            <Button color="secondary" on:click={() => moveName(index, true)}>
              <Icon name="chevron-up" />
            </Button>
            <Button color="secondary" on:click={() => moveName(index, false)}>
              <Icon name="chevron-down" />
            </Button>
            <input type="text" class="form-control" bind:value={names[index].value} />
            <IconButton
              color="secondary"
              icon="heart-fill"
              tooltip="Favourite"
              click={() => (names[index].status = WordStatus.Favourite)}
              active={names[index].status === WordStatus.Favourite}
            />
            <IconButton
              color="secondary"
              icon="hand-thumbs-up"
              tooltip="Okay"
              click={() => (names[index].status = WordStatus.Okay)}
              active={names[index].status === WordStatus.Okay}
            />
            <IconButton
              color="secondary"
              icon="emoji-laughing"
              tooltip="Jokingly"
              click={() => (names[index].status = WordStatus.Jokingly)}
              active={names[index].status === WordStatus.Jokingly}
            />
            <IconButton
              color="secondary"
              icon="people"
              tooltip="Friends only"
              click={() => (names[index].status = WordStatus.FriendsOnly)}
              active={names[index].status === WordStatus.FriendsOnly}
            />
            <IconButton
              color="secondary"
              icon="hand-thumbs-down"
              tooltip="Avoid"
              click={() => (names[index].status = WordStatus.Avoid)}
              active={names[index].status === WordStatus.Avoid}
            />
            <IconButton
              color="danger"
              icon="trash3"
              tooltip="Remove name"
              click={() => removeName(index)}
            />
          </div>
        {/each}
        <div class="input-group m-1">
          <input type="text" class="form-control" bind:value={newName} />
          <IconButton color="success" icon="plus" tooltip="Add name" click={() => addName()} />
        </div>
      </div>
      <div class="col-md">
        <h4>Links</h4>
        {#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}
        <div class="input-group m-1">
          <input type="text" class="form-control" bind:value={newLink} />
          <IconButton color="success" icon="plus" tooltip="Add link" click={() => addLink()} />
        </div>
      </div>
    </div>
    <div class="row m-1">
      <div class="col-md">
        <h4>Pronouns</h4>
        {#each pronouns as _, index}
          <div class="input-group m-1">
            <Button color="secondary" on:click={() => movePronoun(index, true)}>
              <Icon name="chevron-up" />
            </Button>
            <Button color="secondary" on:click={() => movePronoun(index, false)}>
              <Icon name="chevron-down" />
            </Button>
            <input type="text" class="form-control" bind:value={pronouns[index].pronouns} />
            <input type="text" class="form-control" bind:value={pronouns[index].display_text} />
            <IconButton
              color="secondary"
              icon="heart-fill"
              tooltip="Favourite"
              click={() => (pronouns[index].status = WordStatus.Favourite)}
              active={pronouns[index].status === WordStatus.Favourite}
            />
            <IconButton
              color="secondary"
              icon="hand-thumbs-up"
              tooltip="Okay"
              click={() => (pronouns[index].status = WordStatus.Okay)}
              active={pronouns[index].status === WordStatus.Okay}
            />
            <IconButton
              color="secondary"
              icon="emoji-laughing"
              tooltip="Jokingly"
              click={() => (pronouns[index].status = WordStatus.Jokingly)}
              active={pronouns[index].status === WordStatus.Jokingly}
            />
            <IconButton
              color="secondary"
              icon="people"
              tooltip="Friends only"
              click={() => (pronouns[index].status = WordStatus.FriendsOnly)}
              active={pronouns[index].status === WordStatus.FriendsOnly}
            />
            <IconButton
              color="secondary"
              icon="hand-thumbs-down"
              tooltip="Avoid"
              click={() => (pronouns[index].status = WordStatus.Avoid)}
              active={pronouns[index].status === WordStatus.Avoid}
            />
            <IconButton
              color="danger"
              icon="trash3"
              tooltip="Remove pronouns"
              click={() => removePronoun(index)}
            />
          </div>
        {/each}
        <div class="input-group m-1">
          <input type="text" class="form-control" bind:value={newPronouns} />
          <input type="text" class="form-control" bind:value={newPronounsDisplay} />
          <IconButton
            color="success"
            icon="plus"
            tooltip="Add pronouns"
            click={() => addPronouns()}
          />
        </div>
      </div>
    </div>
    <hr />
    <h4>
      Fields <Button on:click={() => (fields = [...fields, { name: "New field", entries: [] }])}>
        Add new field
      </Button>
    </h4>
  </div>
  <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)} />
      {/each}
    </div>
  </div>
{/if}

Edit profile {#if modified} {/if}

An error occurred

Avatar

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

An error occurred

Avatar

Edit profile {#if modified} {/if}