{#each err as error} {@html error} {/each} {#if success} Group information updated! {/if} Name: Display name: </Col> <Col xs={12} lg={4} class="mb-2"> <Label>Color:</Label> <Row> <Col xs={9}> <Input type="text" bind:value={input.color} aria-label="group color value"/> </Col> <Col> <Input class="p-0 w-100" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" /> </Col> </Row> </Col> <Col xs={12} lg={4} class="mb-2"> <Label>Icon url:</Label> <Input bind:value={input.icon} maxlength={256} type="url" placeholder={group.icon} aria-label="group icon url"/> </Col> <Col xs={12} lg={4} class="mb-2"> <Label>Banner url:</Label> <Input bind:value={input.banner} maxlength={256} type="url" placeholder={group.banner} aria-label="group banner url"/> </Col> </Row> <div class="my-2"> <b>Description:</b><br /> {#if descriptions.length > 0 && descriptions[0].trim() != ""} <Button size="sm" class="my-2" color="primary" on:click={() => input.description = descriptions[0]} aria-label="use template 1">Template 1</Button> {/if} {#if descriptions.length > 1 && descriptions[1].trim() != ""} <Button size="sm" class="my-2" color="primary" on:click={() => input.description = descriptions[1]} aria-label="use template 2">Template 2</Button> {/if} {#if descriptions.length > 2 && descriptions[2].trim() != ""} <Button size="sm" class="my-2" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button> {/if} <br> <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autoresize placeholder={group.description} aria-label="group description"/> </div> <span class="text-center d-block mb-2 mb-lg-1" >({input.description ? input.description.length : 0} / 1000 characters)</span> {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete group">Delete</Button> {:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete group">Delete</Button>{/if} <Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}> <ModalHeader toggle={toggleDeleteModal}> Delete group </ModalHeader> <ModalBody> {#if deleteErr}<Alert color="danger">{deleteErr}</Alert>{/if} <Label>If you're sure you want to delete this group, type out the group ID (<code>{group.id}</code>) below.</Label> <input class="mb-3 form-control" bind:value={deleteInput} maxlength={7} placeholder={group.id} aria-label={`type out the group id ${group.id} to confirm deletion`} use:focus> {#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete} aria-label="confirm delete">Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal} aria-label="cancel delete">Back</Button> {:else}<Button style="flex 0" color="danger" disabled aria-label="confirm delete"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel delete">Back</Button> {/if} </ModalBody> </Modal>