{$t("pages.wallet_login_textcode.title")}

{@html $t("wallet_sync.textcode.usage_warning")}

{#if !connected}

{@html $t("wallet_sync.offline_warning")} {@html $t("pages.wallet_login.offline_advice")}

{/if}

{@html $t("pages.wallet_login_textcode.description")}
{@html $t("wallet_sync.server_transfer_notice")}

{@html $t("pages.wallet_login_textcode.enter_here")}

{#if error}
        <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
          <ExclamationTriangle class="animate-bounce mt-10 h-16 w-16 mx-auto" />
          <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-5">
            {@html $t("errors.error_occurred", {
              values: { message: display_error(error) },
            })}
          </p>
        </div>
      {:else if state === "importing"}
        <Spinner class="mx-auto" />
      {/if}

<div class="mx-auto">
        
        <div class="my-4 mx-1">
          <button
            class="mt-4 mb-8 w-full text-white bg-primary-700 disabled:bg-primary-700/50 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
            on:click={textcode_submit}
            disabled={!connected || !textcode}
            class:hidden={state === "importing" || error}
          >
            <CheckCircle
              tabindex="-1"
              class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none  group-hover:text-gray-900 dark:group-hover:text-white"
            />
            {$t("pages.wallet_login_textcode.import_btn")}
          </button>

<button
            on:click={() => window.history.go(-1)}
            class="w-full text-gray-500 dark:text-gray-400 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
            ><ArrowLeft
              tabindex="-1"
              class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none  group-hover:text-gray-900 dark:group-hover:text-white"
            />{$t("buttons.back")}</button
          >
        </div>
      </div>
    </div>
  </div>
</CenteredLayout>