{name}

{#if instance_group !== undefined}

<div class="flex justify-end">
				<Button
					size="xs"
					on:click={async () => {
						await GroupService.updateInstanceGroup({
							name,
							requestBody: { new_summary: instance_group?.summary ?? '' }
						})
						dispatch('update')
						sendUserToast('New summary saved')
					}}>Save Summary</Button
				>
			</div>
		</div>
		<h2>Members ({members?.length ?? 0})</h2>
		<div class="flex items-start">
			<input type="text" placeholder="john@acme.com" bind:value={email} />
			<Button
				variant="contained"
				color="blue"
				size="sm"
				btnClasses="!ml-4"
				on:click={async () => {
					await GroupService.addUserToInstanceGroup({
						name,
						requestBody: { email: email }
					})
					dispatch('update')
					sendUserToast('User added')
					loadInstanceGroup()
				}}
			>
				Add member
			</Button>
		</div>
		{#if members}
			<TableCustom>
				<tr slot="header-row">
					<th>user</th>
					<th />
				</tr>
				<tbody slot="body">
					{#each members as { member_email }}<tr>
							<td>{member_email}</td>
							<td>
								<button
									class="ml-2 text-red-500"
									on:click={async () => {
										await GroupService.removeUserFromInstanceGroup({
											name,
											requestBody: { email: member_email }
										})
										dispatch('update')
										sendUserToast('User removed')
										loadInstanceGroup()
									}}>remove</button
								>
							</td>
						</tr>{/each}
				</tbody>
			</TableCustom>
		{:else}
			<div class="flex flex-col">
				{#each new Array(6) as _}
					<Skeleton layout={[[2], 0.7]} />
				{/each}
			</div>
		{/if}
	{/if}
</div>