<div class="auth-container" x-data="{
  codeValue: '',
  get isComplete() {
    return this.codeValue.replace(/\D/g, '').length === 6;
  }
}">
  <div class="auth-card">
    <header>
      <h1><%= t(".title") %></h1>
      <small><%= t(".sent_to") %> <strong><%= @identity.primary_email %></strong></small>
    </header>

    <%= form_with url: verify_login_attempt_path(@attempt), method: :post, local: true do |form| %>
      <%= hidden_field_tag :return_to, params[:return_to] if params[:return_to].present? %>
      <fieldset>
        <%= form.label :code, t(".code_label") %>
        <%= render Components::Login::CodeInput.new(form: form, alpine_model: "codeValue") %>
      </fieldset>
      <%= form.submit "#{t('.verify')} →", "x-bind:disabled": "!isComplete" %>
    <% end %>

    <footer>
      <%= form_with url: resend_login_attempt_path(@attempt), method: :post, style: "margin: 0;" do %>
        <%= button_tag t(".resend"), type: "submit", class: "secondary" %>
      <% end %>
      <p><small>Can't find it? Check your spam folder.</small></p>

      <p style="margin-top: 1rem;">
        <%= t(".wrong_email") %>
        <% signup_flow = @attempt.provenance&.start_with?("signup") %>
        <% if signup_flow %>
          <%= link_to t(".use_different_address"), signup_path(
            identity: {
              first_name: @identity.first_name,
              last_name: @identity.last_name,
              birthday: @identity.birthday,
              country: @identity.country,
              primary_email: @identity.primary_email
            },
            return_to: @attempt.return_to
          ) %>
        <% else %>
          <%= link_to t(".use_different_address"), login_path(email: @identity.primary_email, return_to: @attempt.return_to) %>
        <% end %>
      </p>

      <% dev_tool do %>
        <p style="margin-top: 1rem; font-size: 0.85rem;">
          <em>Dev mode: grab the code <%= link_to "here", letter_opener_web_path, target: "_blank" %></em>
        </p>
      <% end %>
    </footer>
  </div>
</div>
