<div class="flex items-center justify-between">
  <h1 class="text-xl font-medium text-primary"><%= t(".title") %></h1>

  <%= render LinkComponent.new(
    text: "New import",
    href: new_import_path,
    icon: "plus",
    variant: "primary",
    frame: :modal
  ) %>
</div>

<div class="bg-container shadow-border-xs rounded-xl p-4">
  <% if @imports.empty? %>
    <%= render partial: "imports/empty" %>
  <% else %>
    <div class="rounded-xl bg-container-inset p-1">
      <h2 class="uppercase px-4 py-2 text-secondary text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>

      <div class="border border-alpha-black-100 rounded-lg bg-container shadow-xs">
        <%= render partial: "imports/import", collection: @imports.ordered, spacer_template: "shared/ruler" %>
      </div>
    </div>
  <% end %>
</div>
