{@html htmlName} ({member.id})

{#if view === "card"} {if (event.key === "Enter") {avatarOpen = true}}} on:click={toggleAvatarModal} class="rounded avatar mx-auto w-100 h-auto mb-2" src={icon_url_resized} alt={altText}/>

{#if member.display_name}

{@html htmlDisplayName}

{/if} {#if member.pronouns}

{@html htmlPronouns}

{/if}

{@html htmlDesc}

{#if !isPublic}{/if} {#if !isPublic && isDash}{/if} {#if !isPublic}Edit member{/if} {#if !isPublic && isDash}View groups{/if} View page {:else if view === "groups"} {#if groupList.length > 0} Groups

{#each groupList as group, index (group.id)} {@html toHTML(group.name)} ({group.id}) {/each} {:else} This member is in no groups. {/if}

Edit member Back to info View page {:else if view === "edit"} Name: Avatar url:

Display name:

<Label>Pronouns:</Label>
            <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.pronouns} maxlength={100} type="text" placeholder={member.pronouns} aria-label="member pronouns" />
            <hr style="min-height: 1px" />
            <Label>Description:</Label>
            <textarea class="form-control" style="resize: none; overflow: hidden;" bind:value={input.description} maxlength={1000} use:autoresize placeholder={member.description} aria-label="member description"/>
            <hr style="min-height: 1px" />
            <Label>Color:</Label>
            <Row>
                <Col xs={9}>
                    <Input type="text" bind:value={input.color} aria-label="member color value"/>
                </Col>
                <Col class="p-0">
                    <Input class="p-0" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
                </Col>
            </Row>
            <hr style="min-height: 1px" />
            {#if err}
                {#each err as errorMessage}
                    <Alert class="m-0 mb-2" color="danger">{@html errorMessage}</Alert>
                {/each}
            {/if}
            <Row>
                <Col xs={4} class="align-items-center justify-content-center">
                    <Button disabled={loading} color="link" class="mt-2 text-danger" style="height: 3.5rem;" on:click={() => {view = "card"}} id={`member-${member.uuid}-back-button-edit`}><FaTimes/></Button>
                </Col>
                <Col xs={4}>
                </Col>
                <Col xs={4} class="align-items-center justify-content-center">
                    <Button disabled={loading} color="link" class="mt-2 text-success" style="height: 3.5rem;" on:click={submit} id={`member-${member.uuid}-submit-button-edit`}><FaCheck/></Button>
                </Col>
                <Tooltip target={`member-${member.uuid}-back-button-edit`} placement="bottom">Go back</Tooltip>
                <Tooltip target={`member-${member.uuid}-submit-button-edit`} placement="bottom">Submit edit</Tooltip>
            </Row>
        {/if}
    </div>
</div>

.hide-scrollbar {
        scrollbar-width: none;
    }

.item {
        height: auto;
    }

@media (min-width: 768px) {
        .item {
            height: 30rem;
        }
    }
</style>