660}
class:min-w-[310px]={mobile}
class:min-w-[500px]={!mobile}
class:max-w-[370px]={mobile}
class:max-w-[600px]={!mobile}
>
{#if step == "mnemonic"}
{:else if step == "pazzle"}
{@html $t("pages.login.select_emoji", {
values: {
category: $t(
"emojis.category." +
emoji_cat[shuffle.category_indices[pazzlePage]]
),
},
})}
{#each [0, 1, 2, 3, 4] as row}
{#each emojis2[pazzlePage]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i (pazzlePage + "-" + row + "-" + i)}
select(row * 3 + i)}
on:keypress={() => select(row * 3 + i)}
>
{/each}
{/each}
{:else if step == "order"}
{$t("pages.login.order_emojis")}
{#each [0, 1, 2] as row}
{#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
{#if !emoji.sel}
select_order(emoji)}
on:keypress={() => select_order(emoji)}
title={$t(
"emojis.codes." +
emojis[emoji_cat[emoji.cat]][emoji.index].code
)}
>
{:else}
{emoji.sel}
{/if}
{/each}
{/each}
{:else if step == "pin"}
{$t("pages.login.enter_pin")}
{#each [0, 1, 2] as row}
{#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num}
{/each}
{/each}
{#each pin_code as pin_key}*{/each}
{/if}