{#each steps as _, i}

{i < getCurrentStepIndex() ? '✓' : i + 1}

{#if i < steps.length - 1}

{/if} {/each}

{steps[getCurrentStepIndex()]} · Step {getCurrentStepIndex() + 1} of {steps.length}

{#if flow.state.error}

{flow.state.error}

{/if} {#if flow.state.step === 'welcome'}

{$_('migration.offline.welcome.title')}

{$_('migration.offline.welcome.desc')}

{$_('migration.offline.welcome.warningTitle')}

{$_('migration.offline.welcome.warningDesc')}

{$_('migration.offline.welcome.requirementsTitle')}

{$_('migration.offline.welcome.requirement1')}
{$_('migration.offline.welcome.requirement2')}
{$_('migration.offline.welcome.requirement3')}

{$_('migration.offline.welcome.understand')}

{:else if flow.state.step === 'provide-did'}

{$_('migration.offline.provideDid.title')}

{$_('migration.offline.provideDid.desc')}

{$_('migration.offline.provideDid.label')} flow.setUserDid((e.target as HTMLInputElement).value)} />

{$_('migration.offline.provideDid.hint')}

{:else if flow.state.step === 'upload-car'}

{$_('migration.offline.uploadCar.title')}

{$_('migration.offline.uploadCar.desc')}

{#if flow.state.carNeedsReupload}

{$_('migration.offline.uploadCar.reuploadWarningTitle')}

{$_('migration.offline.uploadCar.reuploadWarning')}

{#if flow.state.carFileName}

Previous file: {flow.state.carFileName} ({(flow.state.carSizeBytes / 1024 / 1024).toFixed(2)} MB)

{/if}

{$_('migration.offline.uploadCar.label')}

{#if flow.state.carFile && flow.state.carFileName}

{flow.state.carFileName} ({(flow.state.carSizeBytes / 1024 / 1024).toFixed(2)} MB)

{/if}

{$_('migration.offline.uploadCar.hint')}

{:else if flow.state.step === 'provide-rotation-key'}

{$_('migration.offline.rotationKey.title')}

{$_('migration.offline.rotationKey.desc')}

{$_('migration.offline.rotationKey.securityWarningTitle')}

{$_('migration.offline.rotationKey.securityWarning1')}
{$_('migration.offline.rotationKey.securityWarning2')}
{$_('migration.offline.rotationKey.securityWarning3')}

{$_('migration.offline.rotationKey.label')}

{$_('migration.offline.rotationKey.hint')}

{#if keyValid === true}

{$_('migration.offline.rotationKey.valid')}

{:else if keyValid === false}

{$_('migration.offline.rotationKey.invalid')}

{/if}

{:else if flow.state.step === 'choose-handle'} handleInput = h} onDomainChange={(d) => selectedDomain = d} onCheckHandle={checkHandle} onEmailChange={(e) => flow.setTargetEmail(e)} onPasswordChange={(p) => flow.setTargetPassword(p)} onAuthMethodChange={(m) => selectedAuthMethod = m} onInviteCodeChange={(c) => flow.setInviteCode(c)} onBack={() => flow.setStep('provide-rotation-key')} onContinue={proceedToReview} /> {:else if flow.state.step === 'review'}

{$_('migration.inbound.review.title')}

{$_('migration.offline.review.desc')}

{$_('migration.inbound.review.did')}: {flow.state.userDid}

{$_('migration.inbound.review.newHandle')}: {flow.state.targetHandle}

{$_('migration.offline.review.carFile')}: {flow.state.carFileName} ({(flow.state.carSizeBytes / 1024 / 1024).toFixed(2)} MB)

{$_('migration.offline.review.rotationKey')}: {flow.state.rotationKeyDidKey}

{$_('migration.inbound.review.targetPds')}: {window.location.origin}

{$_('migration.inbound.review.email')}: {flow.state.targetEmail}

{$_('migration.inbound.review.authentication')}: {flow.state.authMethod === 'passkey' ? $_('migration.inbound.review.authPasskey') : $_('migration.inbound.review.authPassword')}

{$_('migration.offline.review.plcWarningTitle')}

{$_('migration.offline.review.plcWarning')}

{:else if flow.state.step === 'creating' || flow.state.step === 'importing'}

{$_('migration.offline.migrating.title')}

{$_('migration.offline.migrating.desc')}

{flow.state.step !== 'creating' ? '✓' : '○'} {$_('migration.offline.migrating.creating')}

○ {$_('migration.offline.migrating.importing')}

{flow.state.progress.currentOperation}

{:else if flow.state.step === 'migrating-blobs'}

{$_('migration.offline.blobs.title')}

{$_('migration.offline.blobs.desc')}

✓ {$_('migration.offline.migrating.importing')}

○ {$_('migration.offline.blobs.migrating')}

{#if flow.state.progress.blobsTotal > 0}

{flow.state.progress.blobsMigrated} / {flow.state.progress.blobsTotal} blobs

{/if}

{flow.state.progress.currentOperation}

{#if flow.state.progress.blobsFailed.length > 0}

{$_('migration.offline.blobs.failedTitle')}

{$_('migration.offline.blobs.failedDesc', { values: { count: flow.state.progress.blobsFailed.length } })}

{/if}

{:else if flow.state.step === 'email-verify'} flow.updateField('emailVerifyToken', t)} onSubmit={submitEmailVerify} onResend={resendEmailVerify} /> {:else if flow.state.step === 'passkey-setup'} passkeyName = n} onRegister={registerPasskey} /> {:else if flow.state.step === 'app-password'} {:else if flow.state.step === 'plc-signing' || flow.state.step === 'finalizing'}

{$_('migration.inbound.finalizing.title')}

{$_('migration.inbound.finalizing.desc')}

{flow.state.progress.plcSigned ? '✓' : '○'} {$_('migration.inbound.finalizing.signingPlc')}

{flow.state.progress.activated ? '✓' : '○'} {$_('migration.inbound.finalizing.activating')}

{flow.state.progress.currentOperation}

{:else if flow.state.step === 'success'} {:else if flow.state.step === 'error'} {/if}