sure/app/views/imports/new.html.erb

<%= modal do %>
  <div class="p-4 space-y-4 max-w-[420px]">
    <div class="space-y-2">
      <div class="flex justify-between items-center">
        <h2 class="font-medium text-gray-900"><%= t(".title") %></h2>
        <button data-action="modal#close" tabindex="-1">
          <%= lucide_icon("x", class: "w-5 h-5 text-gray-900") %>
        </button>
      </div>

      <p class="text-gray-500 text-sm"><%= t(".description") %></p>
    </div>

    <div class="rounded-xl bg-gray-25 p-1">
      <h3 class="uppercase text-gray-500 text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
      <ul class="bg-white border border-alpha-black-25 rounded-lg shadow-xs">
        <li>
          <% if @pending_import.present? && (params[:type].nil? || params[:type] == @pending_import.type) %>
            <%= link_to import_path(@pending_import), class: "flex items-center justify-between p-4 group cursor-pointer", data: { turbo: false } do %>
              <div class="flex items-center gap-2">
                <div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
                  <%= lucide_icon("loader", class: "w-5 h-5 text-orange-500") %>
                </div>
                <span class="text-sm text-gray-900 group-hover:text-gray-700">
                  <%= t(".resume", type: @pending_import.type.titleize) %>
                </span>
              </div>
              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
            <% end %>

            <div class="pl-14 pr-3">
              <div class="h-px bg-alpha-black-50"></div>
            </div>
          </li>
        <% end %>

        <% if Current.family.accounts.any? && (params[:type].nil? || params[:type] == "TransactionImport") %>
          <li>
            <%= button_to imports_path(import: { type: "TransactionImport" }), class: "flex items-center justify-between p-4 group cursor-pointer w-full", data: { turbo: false } do %>
              <div class="flex items-center gap-2">
                <div class="bg-indigo-500/5 rounded-md w-8 h-8 flex items-center justify-center">
                  <%= lucide_icon("file-spreadsheet", class: "w-5 h-5 text-indigo-500") %>
                </div>
                <span class="text-sm text-gray-900 group-hover:text-gray-700">
                  <%= t(".import_transactions") %>
                </span>
              </div>
              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
            <% end %>

            <div class="pl-14 pr-3">
              <div class="h-px bg-alpha-black-50"></div>
            </div>
          </li>
        <% end %>

        <% if Current.family.accounts.any? && (params[:type].nil? || params[:type] == "TradeImport") %>
          <li>
            <%= button_to imports_path(import: { type: "TradeImport" }), class: "flex items-center justify-between p-4 group cursor-pointer w-full", data: { turbo: false } do %>
              <div class="flex items-center gap-2">
                <div class="bg-yellow-500/5 rounded-md w-8 h-8 flex items-center justify-center">
                  <%= lucide_icon("square-percent", class: "w-5 h-5 text-yellow-500") %>
                </div>
                <span class="text-sm text-gray-900 group-hover:text-gray-700">
                  <%= t(".import_portfolio") %>
                </span>
              </div>
              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
            <% end %>

            <div class="pl-14 pr-3">
              <div class="h-px bg-alpha-black-50"></div>
            </div>
          </li>
        <% end %>

        <% if params[:type].nil? || params[:type] == "AccountImport" %>
          <li>
            <%= button_to imports_path(import: { type: "AccountImport" }), class: "flex items-center justify-between p-4 group cursor-pointer w-full", data: { turbo: false } do %>
              <div class="flex items-center gap-2">
                <div class="bg-violet-500/5 rounded-md w-8 h-8 flex items-center justify-center">
                  <%= lucide_icon("building", class: "w-5 h-5 text-violet-500") %>
                </div>
                <span class="text-sm text-gray-900 group-hover:text-gray-700">
                  <%= t(".import_accounts") %>
                </span>
              </div>
              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
            <% end %>

            <div class="pl-14 pr-3">
              <div class="h-px bg-alpha-black-50"></div>
            </div>
          </li>
        <% end %>

        <% if Current.family.accounts.any? && (params[:type].nil? || params[:type] == "MintImport" || params[:type] == "TransactionImport") %>
          <li>
            <%= button_to imports_path(import: { type: "MintImport" }), class: "flex items-center justify-between p-4 group w-full", data: { turbo: false } do %>
              <div class="flex items-center gap-2">
                <%= image_tag("mint-logo.jpeg", alt: "Mint logo", class: "w-8 h-8 rounded-md") %>
                <span class="text-sm text-gray-900">
                  <%= t(".import_mint") %>
                </span>
              </div>
              <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
            <% end %>

            <div class="pl-14 pr-3">
              <div class="h-px bg-alpha-black-50"></div>
            </div>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
<% end %>