Maybe/app/views/import/confirms/_mappings.html.erb

<%# locals: (import:, mapping_class:, step_idx:) %>

<% mappings = mapping_class.for_import(import) %>
<% is_last_step = step_idx == import.mapping_steps.count - 1 %>

<% if mapping_class == Import::AccountMapping %>
  <% if import.requires_account? %>
    <div class="flex items-center justify-between p-4 mb-4 gap-4 text-gray-500 bg-red-100 border border-red-200 rounded-lg w-[650px]">
      <%= tag.p t(".no_accounts"), class: "text-sm" %>

      <%= link_to t(".create_account"), new_account_path(return_to: import_confirm_path(import)), class: "btn btn--primary whitespace-nowrap", data: { turbo_frame: :modal } %>
    </div>
  <% elsif import.has_unassigned_account? %>
    <div class="flex items-center justify-between p-4 mb-4 gap-4 text-gray-500 bg-yellow-100 border border-yellow-200 rounded-lg w-[650px]">
      <%= tag.p t(".unassigned_account"), class: "text-sm" %>

      <%= link_to t(".create_account"), new_account_path(return_to: import_confirm_path(import)), class: "btn btn--primary whitespace-nowrap", data: { turbo_frame: :modal } %>
    </div>
  <% end %>
<% end %>

<div class="space-y-4">
  <div class="bg-gray-25 rounded-xl p-1 space-y-1 w-[650px]">
    <div class="grid grid-cols-3 gap-2 text-xs font-medium text-gray-500 uppercase px-5 py-3">
      <p><%= t(".csv_mapping_label", mapping: mapping_label(mapping_class)) %></p>
      <p><%= t(".maybe_mapping_label", mapping: mapping_label(mapping_class)) %></p>
      <p class="justify-self-end"><%= t(".rows_label") %></p>
    </div>

    <div class="border border-alpha-black-25 rounded-md shadow-xs divide-y divide-alpha-black-100 text-sm">
      <% mappings.sort_by(&:key).each do |mapping| %>
        <div class="px-5 py-3 bg-white first:rounded-tl-xl first:rounded-tr-xl last:rounded-bl-xl last:rounded-br-xl">
          <%= render partial: "import/mappings/form", locals: { mapping: mapping } %>
        </div>
      <% end %>
    </div>
  </div>

  <div class="flex justify-center">
    <%= link_to is_last_step ? import_path(import) : url_for(step: step_idx + 2), class: "btn btn--primary w-36 flex items-center justify-between gap-2" do %>
      <span>Next</span>
      <%= lucide_icon "arrow-right", class: "w-5 h-5" %>
    <% end %>
  </div>
</div>