Maybe/app/views/import/uploads/show.html.erb

<%= content_for :header_nav do %>
  <%= render "imports/nav", import: @import %>
<% end %>

<%= content_for :previous_path, imports_path %>

<div class="space-y-12">
  <div class="space-y-4 mx-auto max-w-md">
    <div class="text-center space-y-2">
      <h1 class="text-3xl text-primary font-medium"><%= t(".title") %></h1>
      <p class="text-secondary text-sm"><%= t(".description") %></p>
    </div>

    <div data-controller="tabs" data-tabs-active-class="bg-container" data-tabs-default-tab-value="csv-paste-tab">
      <div class="flex justify-center mb-4">
        <div class="tab-item-active rounded-lg inline-flex p-1 space-x-2 text-sm text-primary font-medium">
          <button type="button" data-id="csv-paste-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Copy & Paste</button>
          <button type="button" data-id="csv-upload-tab" class="p-2 rounded-lg" data-tabs-target="btn" data-action="click->tabs#select">Upload CSV</button>
        </div>
      </div>

      <% ["csv-paste-tab", "csv-upload-tab"].each do |tab| %>
        <%= tag.div id: tab, data: { tabs_target: "tab" }, class: tab == "csv-upload-tab" ? "hidden" : "" do %>
          <%= styled_form_with model: @import, scope: :import, url: import_upload_path(@import), multipart: true, class: "space-y-2" do |form| %>
            <%= form.select :col_sep, Import::SEPARATORS, label: true %>

            <% if @import.type == "TransactionImport" || @import.type == "TradeImport" %>
              <%= form.select :account_id, @import.family.accounts.pluck(:name, :id), { label: "Account (optional)", include_blank: "Multi-account import", selected: @import.account_id } %>
            <% end %>

            <% if tab == "csv-paste-tab" %>
              <%= form.text_area :raw_file_str,
                       rows: 10,
                       required: true,
                       placeholder: "Paste your CSV file contents here",
                       "data-auto-submit-form-target": "auto" %>
            <% else %>
              <label for="import_csv_file" class="flex flex-col items-center justify-center w-full h-56 border-2 border-secondary border-dashed rounded-lg cursor-pointer bg-container-inset">
                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                  <%= form.file_field :csv_file, class: "ml-32", "data-auto-submit-form-target": "auto" %>
                </div>
              </label>
            <% end %>

            <%= form.submit "Upload CSV", disabled: @import.complete? %>
          <% end %>
        <% end %>
      <% end %>
    </div>
  </div>

  <div class="bg-alpha-black-25 rounded-xl p-1 mt-5 mx-auto max-w-7xl">
    <div class="text-secondary p-2 mb-2">
      <div class="flex gap-2 mb-2">
        <%= lucide_icon("info", class: "w-5 h-5 shrink-0") %>
        <p class="text-sm"><%= t(".instructions_1") %></p>

      </div>

      <ul class="list-disc list-inside text-sm pl-8">
        <li><%= t(".instructions_2") %></li>
        <li><%= t(".instructions_3") %></li>
        <li><%= t(".instructions_4") %></li>
        <li><%= t(".instructions_5") %></li>
      </ul>
    </div>

    <%= render partial: "imports/table", locals: { headers: @import.csv_template.headers, rows: @import.csv_template } %>
  </div>
</div>