Data section

render NitroKit::DataSection.new(title: "Members", id: "gallery-data-section-minimal") do |section|
  section.table(member_table(id: "gallery-data-section-minimal-table", count: 1)) do |table|
    render_member_rows(table, 1)
  end
end

render NitroKit::DataSection.new(
  title: "Workspace members",
  description: "Active, invited, and suspended access across every project.",
  id: "gallery-data-section-complete"
) do |section|
  section.actions NitroKit::ButtonGroup.new(label: "Member data actions") do |actions|
    actions.button("Export CSV", href: "#export")
    actions.button("Invite teammate", href: "#invite", variant: :primary)
  end
  section.table(member_table(id: "gallery-data-section-complete-table", count: 4)) do |table|
    render_member_rows(table, 4)
  end
end

render NitroKit::DataSection.new(
  title: "API credentials",
  description: "Credentials are scoped by environment and owner.",
  id: "gallery-data-section-empty"
) do |section|
  section.empty_state NitroKit::EmptyState.new(
    title: "No API credentials",
    description: "Create one when an integration is ready to authenticate.",
    level: 3,
    id: "gallery-data-section-empty-state"
  ) do |empty|
    empty.icon NitroKit::Icon.new(:key_round)
    empty.action NitroKit::Button.new("Create credential", href: "#create", variant: :primary)
  end
end

render NitroKit::DataSection.new(
  title: "Workspace profile",
  description: "A DetailsTable satisfies the same content boundary as a Table.",
  id: "gallery-data-section-details"
) do |section|
  section.actions NitroKit::Button.new("Edit profile", href: "#edit")
  section.table(
    NitroKit::DetailsTable.new(
      Gallery::Data.members.first,
      label: "Workspace profile",
      id: "gallery-data-section-details-table"
    )
  ) do |details|
    details.fields(:name, :role, :status)
  end
end

render NitroKit::Container.new(size: :xl, id: "gallery-data-section-dense-container") do
  render NitroKit::DataSection.new(
    title: "International workspace access inventory",
    description: "A deliberately dense table remains caller-owned while the section owns only its heading, actions, and content ordering.",
    id: "gallery-data-section-dense"
  ) do |section|
    section.actions NitroKit::ButtonGroup.new(label: "Inventory actions") do |actions|
      actions.button("Download complete access inventory", href: "#download")
    end
    section.table(member_table(id: "gallery-data-section-dense-table", count: 12)) do |table|
      render_member_rows(table, 12, long: true)
    end
  end
end

render NitroKit::DataSection.new(
  title: Gallery::Hostile::LONG_WORD,
  description: Gallery::Hostile::LONG_PARAGRAPH,
  id: "gallery-data-section-hostile"
) do |section|
  section.actions NitroKit::ButtonGroup.new(id: "gallery-data-section-hostile-actions", label: "Every member action") do |actions|
    Gallery::Hostile::ACTION_LABELS.each_with_index do |label, index|
      actions.button(
        label,
        id: "gallery-data-section-hostile-action-#{index + 1}",
        href: "#hostile-member-action-#{index + 1}",
        size: :sm
      )
    end
  end
  section.table(
    NitroKit::Table.new(
      id: "gallery-data-section-hostile-table",
      table_aria: { label: "40 hostile workspace members" }
    )
  ) do |table|
    table.caption(Gallery::Hostile::LONG_LABEL)
    table.thead do
      table.tr do
        table.th("Member")
        table.th("Email")
        table.th("Status")
        table.th("Balance", align: :right)
      end
    end
    table.tbody do
      Gallery::Hostile.members(40).each_with_index do |member, index|
        table.tr do
          table.th(member.name, scope: :row)
          table.td(member.email)
          table.td do
            render NitroKit::Badge.new(
              Gallery::Hostile::BADGE_LABELS.fetch(index % Gallery::Hostile::BADGE_LABELS.size),
              id: "gallery-data-section-hostile-status-#{index + 1}",
              color: member.status == :active ? :success : :warning,
              size: :sm
            )
          end
          table.td(index.even? ? Gallery::Hostile::HUGE_MONEY : Gallery::Hostile::NEGATIVE_MONEY, align: :right)
        end
      end
    end
  end
end