<.focus_box>
  <:title>
    Setup Two-Factor Authentication
  </:title>

  <:subtitle>
    Enter the code from your authenticator application before it expires or wait for a new one.
  </:subtitle>

  <:footer>
    <.focus_list>
      <:item>
        Changed your mind?
        <.styled_link href={Routes.settings_path(@conn, :security) <> "#update-2fa"}>
          Go back to Settings
        </.styled_link>
      </:item>
      <:item>
        Having trouble?
        <.styled_link method="post" href={Routes.auth_path(@conn, :initiate_2fa_setup)}>
          Start over
        </.styled_link>
      </:item>
    </.focus_list>
  </:footer>

  <.form
    :let={f}
    for={@conn.params}
    action={Routes.auth_path(@conn, :verify_2fa_setup)}
    id="verify-2fa-form"
    onsubmit="document.getElementById('verify-button').disabled = true"
  >
    <PlausibleWeb.Components.TwoFactor.verify_2fa_input
      form={f}
      field={:code}
      class="mt-6"
      autofocus?={true}
    />
  </.form>
</.focus_box>