{@html htmlName} ({group.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 group.display_name}

{@html htmlDisplayName}

{/if}

{@html htmlDesc}

{#if !isPublic}{/if} {#if !isPublic && isDash}{/if} {#if !isPublic}Edit group{/if} {#if !isPublic && isDash}View members{/if} View page {:else if view === "groups"} {#if memberList.length > 0} Members

{#each memberList as member, index (member.id)} {@html toHTML(member.name)} ({member.id}) {/each} {:else} This group has no members. {/if}

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

Display name:

<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={group.description} aria-label="group description"/>
            <hr style="min-height: 1px" />
            <Label>Color:</Label>
            <Row>
                <Col xs={9}>
                    <Input type="text" bind:value={input.color} aria-label="group 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: 3rem;" on:click={() => {view = "card"}} id={`group-${group.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={`group-${group.uuid}-submit-button-edit`}><FaCheck/></Button>
                </Col>
                <Tooltip target={`group-${group.uuid}-back-button-edit`} placement="bottom">Go back</Tooltip>
                <Tooltip target={`group-${group.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>