{#each accounts as account (account.did)} {@const color = generateColorForDid(account.did)} {#snippet action(name: string, icon: string, onClick: () => void)} {/snippet} selectAccount(account.did)} class=" group flex w-full items-center gap-3 rounded-sm p-2 text-left text-sm font-medium transition-all {account.did === selectedDid ? 'shadow-lg' : ''} " style="color: {color}; background: {account.did === selectedDid ? `linear-gradient(135deg, color-mix(in srgb, var(--nucleus-accent) 20%, transparent), color-mix(in srgb, var(--nucleus-accent2) 20%, transparent))` : 'transparent'};" > @{account.handle}

{@render action('relogin', 'heroicons:arrow-path-rounded-square-solid', () => initiateLogin(account.did, account.handle) )} {@render action('logout', 'heroicons:trash-solid', () => onLogout(account.did))} {#if account.did === selectedDid} {/if} {/each}