<div style="max-width: 600px; margin: 4rem auto; padding: 0 1rem;">
  <div class="auth-card">
    <% method = params[:method]&.to_sym %>

    <% if method.nil? %>
      <%# Show method selection %>
      <header>
        <h1><%= t ".title" %></h1>
        <small><%= t ".choose_method" %></small>
      </header>

      <div style="display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0;">
        <% if @available_methods.include?(:totp) %>
          <%= link_to new_step_up_path(action_type: @action, method: :totp, return_to: @return_to),
              class: "step-up-method-option" do %>
            <div><%= inline_icon("clock", size: 32) %></div>
            <div style="flex: 1;">
              <div style="font-weight: 600;"><%= t(".methods.totp.title") %></div>
              <small><%= t(".methods.totp.description") %></small>
            </div>
          <% end %>
        <% end %>

        <% if @available_methods.include?(:backup_code) %>
          <%= link_to new_step_up_path(action_type: @action, method: :backup_code, return_to: @return_to),
              class: "step-up-method-option" do %>
            <div><%= inline_icon("docs", size: 32) %></div>
            <div style="flex: 1;">
              <div style="font-weight: 600;"><%= t(".methods.backup_code.title") %></div>
              <small><%= t(".methods.backup_code.description") %></small>
            </div>
          <% end %>
        <% end %>

        <% if @available_methods.include?(:webauthn) %>
          <%= link_to new_step_up_path(action_type: @action, method: :webauthn, return_to: @return_to),
              class: "step-up-method-option" do %>
            <div><%= inline_icon("fingerprint", size: 32) %></div>
            <div style="flex: 1;">
              <div style="font-weight: 600;"><%= t(".methods.webauthn.title", default: "Passkey") %></div>
              <small><%= t(".methods.webauthn.description", default: "Use your passkey to verify") %></small>
            </div>
          <% end %>
        <% end %>

        <% if @available_methods.include?(:email) %>
          <%= button_to send_step_up_email_code_path(action_type: @action, return_to: @return_to),
              method: :post,
              class: "step-up-method-option",
              style: "text-align: left; width: 100%; cursor: pointer;" do %>
            <div><%= inline_icon("email", size: 32) %></div>
            <div style="flex: 1;">
              <div style="font-weight: 600;"><%= t(".methods.email.title", default: "Email code") %></div>
              <small><%= t(".methods.email.description", default: "We'll send a code to #{current_identity.primary_email}") %></small>
            </div>
          <% end %>
        <% end %>
      </div>

      <style>
        .step-up-method-option {
          display: flex;
          align-items: center;
          gap: 1rem;
          padding: 1rem;
          border: 1px solid var(--border-color);
          border-radius: 8px;
          text-decoration: none;
          color: inherit;
          transition: all 0.2s;
        }
        .step-up-method-option:hover {
          border-color: var(--primary-color);
          background-color: var(--bg-secondary);
        }
      </style>

      <footer>
        <p><%= link_to t(".cancel"), step_up_cancel_path(@action) %></p>
      </footer>

    <% elsif method == :webauthn %>
      <%# Show WebAuthn/Passkey authentication %>
      <header>
        <h1><%= t(".enter_code_labels.webauthn", default: "Verify with passkey") %></h1>
        <small><%= t(".enter_code_descriptions.webauthn", default: "Use your passkey to confirm your identity") %></small>
      </header>

      <div x-data="stepUpWebauthn()" x-init="init()">
        <div x-show="loading" style="text-align: center; padding: 2rem;">
          <p>Waiting for passkey...</p>
        </div>

        <div x-show="error" x-cloak style="margin: 1rem 0;">
          <div class="alert alert-error" x-text="error"></div>
          <button @click="authenticate()" class="btn" style="width: 100%; margin-top: 1rem;">
            Try again
          </button>
        </div>

        <div x-show="!browserSupported" x-cloak>
          <div class="alert alert-error">
            Your browser doesn't support passkeys. Please use a different verification method.
          </div>
        </div>

        <%= form_with url: verify_step_up_webauthn_path, method: :post, local: true, id: "step-up-webauthn-form" do |f| %>
          <%= f.hidden_field :action_type, value: @action %>
          <%= f.hidden_field :return_to, value: @return_to %>
          <%= f.hidden_field :credential_data, id: "step-up-credential-data" %>
        <% end %>
      </div>

      <footer>
        <p><%= link_to t(".use_different_method"), new_step_up_path(action_type: @action, return_to: @return_to) %></p>
      </footer>

    <% else %>
      <%# Show form for selected method %>
      <header>
        <h1><%= t(".enter_code_labels.#{method}", default: "Enter your code") %></h1>
        <small><%= t(".enter_code_descriptions.#{method}", default: "Enter the verification code") %></small>
      </header>

      <%= form_with url: verify_step_up_path, method: :post, local: true do |f| %>
        <%= f.hidden_field :action_type, value: @action %>
        <%= f.hidden_field :method, value: method %>
        <%= f.hidden_field :return_to, value: @return_to %>

        <fieldset>
          <%= f.label :code, t(".code_label") %>
          <% if method == :backup_code %>
            <%= f.text_field :code,
                required: true,
                autocomplete: "one-time-code",
                autofocus: true,
                placeholder: t(".backup_placeholder") %>
          <% elsif method == :email %>
            <%= f.text_field :code,
                required: true,
                autocomplete: "one-time-code",
                autofocus: true,
                placeholder: "123-456",
                maxlength: 7,
                inputmode: "numeric" %>
          <% else %>
            <%= f.text_field :code,
                required: true,
                autocomplete: "one-time-code",
                autofocus: true,
                placeholder: t(".totp_placeholder"),
                maxlength: 6,
                inputmode: "numeric",
                pattern: "[0-9]{6}" %>
          <% end %>
        </fieldset>

        <%= f.submit "#{t('.verify')} →" %>
      <% end %>

      <footer>
        <p><%= link_to t(".use_different_method"), new_step_up_path(action_type: @action, return_to: @return_to) %></p>
        <% if method == :email %>
          <p>
            <%= button_to "Resend code", resend_step_up_email_path(action_type: @action, return_to: @return_to), method: :post, class: "link-button" %>
          </p>
        <% end %>
      </footer>
    <% end %>
  </div>
</div>
