<%= turbo_frame_tag "family_exports",
    data: exports.any? { |e| e.pending? || e.processing? } ? {
      turbo_refresh_url: family_exports_path,
      turbo_refresh_interval: 3000
    } : {} do %>
  <div class="space-y-0 max-h-96 overflow-y-auto">
    <% if exports.any? %>
      <% exports.each do |export| %>
        <div class="flex items-center justify-between mx-4 py-4">
          <div class="flex items-center gap-2 mb-1">
            <div>
              <p class="text-sm font-medium text-primary">Export from <%= export.created_at.strftime("%B %d, %Y at %I:%M %p") %></p>
              <p class="text-xs text-secondary"><%= export.filename %></p>
            </div>

            <% if export.processing? || export.pending? %>
              <span class="px-1 py text-xs rounded-full bg-gray-500/5 text-secondary border border-alpha-black-50">
                <%= t(".in_progress") %>
              </span>
            <% elsif export.completed? %>
              <span class="px-1 py text-xs rounded-full bg-green-500/5 text-green-500 border border-alpha-black-50">
                <%= t(".complete") %>
              </span>
            <% elsif export.failed? %>
              <span class="px-1 py text-xs rounded-full bg-red-500/5 text-red-500 border border-alpha-black-50">
                <%= t(".failed") %>
              </span>
            <% end %>
          </div>

          <% if export.processing? || export.pending? %>
            <div class="flex items-center gap-2 text-secondary">
              <div class="animate-spin h-4 w-4 border-2 border-secondary border-t-transparent rounded-full"></div>
              <span class="text-sm">Exporting...</span>
            </div>
          <% elsif export.completed? %>
            <div class="flex items-center gap-2">
              <%= button_to family_export_path(export),
                  method: :delete,
                  class: "flex items-center gap-2 text-destructive hover:text-destructive-hover",
                  data: {
                    turbo_confirm: "Are you sure you want to delete this export? This action cannot be undone.",
                    turbo_frame: "_top"
                  } do %>
                <%= icon "trash-2", class: "w-5 h-5 text-destructive" %>
              <% end %>

              <%= link_to download_family_export_path(export),
                  class: "flex items-center gap-2 text-primary hover:text-primary-hover",
                  data: { turbo_frame: "_top" } do %>
                <%= icon "download", class: "w-5 h-5" %>
              <% end %>
            </div>
          <% elsif export.failed? %>
            <div class="flex items-center gap-2">
              <div class="flex items-center gap-2 text-destructive">
                <%= icon "alert-circle", class: "w-4 h-4" %>
              </div>

              <%= button_to family_export_path(export),
                  method: :delete,
                  class: "flex items-center gap-2 text-destructive hover:text-destructive-hover",
                  data: {
                    turbo_confirm: "Are you sure you want to delete this failed export?",
                    turbo_frame: "_top"
                  } do %>
                <%= icon "trash-2", class: "w-5 h-5 text-destructive" %>
              <% end %>
            </div>
          <% end %>
        </div>
      <% end %>
    <% else %>
      <p class="text-sm text-primary text-center py-4 mb-1 font-medium">No exports yet.</p>
    <% end %>
  </div>
<% end %>
