<%
  header_title t("oidc_accounts.new_user.title")
%>

<div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-md">
  <h3 class="text-sm font-medium text-blue-800 mb-2"><%= t("oidc_accounts.new_user.heading") %></h3>
  <p class="text-sm text-blue-700">
    <%= t("oidc_accounts.new_user.description", provider: @pending_auth["provider"]) %>
  </p>
</div>

<%= styled_form_with model: @user, url: create_user_oidc_account_path, class: "space-y-4", data: { turbo: false } do |form| %>
  <div class="p-4 bg-container border border-secondary rounded-md">
    <p class="text-sm text-secondary mb-1"><%= t("oidc_accounts.new_user.email_label") %></p>
    <p class="text-sm text-primary font-medium"><%= @pending_auth["email"] %></p>
  </div>

  <%= form.text_field :first_name,
    label: t("oidc_accounts.new_user.first_name_label"),
    placeholder: t("oidc_accounts.new_user.first_name_placeholder"),
    autofocus: true %>

  <%= form.text_field :last_name,
    label: t("oidc_accounts.new_user.last_name_label"),
    placeholder: t("oidc_accounts.new_user.last_name_placeholder") %>

  <%= form.submit t("oidc_accounts.new_user.submit") %>
<% end %>

<div class="mt-6 text-center">
  <%= render DS::Link.new(
    text: t("oidc_accounts.new_user.cancel"),
    href: new_session_path,
    variant: :default,
    class: "font-medium text-sm text-primary hover:underline transition"
  ) %>
</div>
