Table

render NitroKit::Table.new(
  id: "gallery-table-members",
  table_html: { id: "gallery-table-members-element" }
) do |table|
  table.caption("Workspace members")
  table.thead do
    table.tr do
      table.th("Name")
      table.th("Role")
      table.th("Status", align: :right)
    end
  end
  table.tbody do
    Gallery::Data.members.each do |member|
      table.tr do
        table.th(member.name, scope: :row)
        table.td(member.role.to_s.humanize)
        table.td(member.status.to_s.humanize, align: :right)
      end
    end
  end
end

render NitroKit::Table.new(
  id: "gallery-table-invoices",
  table_html: { id: "gallery-table-invoices-element" }
) do |table|
  table.caption("Invoice history")
  table.thead do
    table.tr do
      table.th("Invoice")
      table.th("Issued")
      table.th("Status")
      table.th("Amount", align: :right)
      table.th("Action", align: :right)
    end
  end
  table.tbody do
    Gallery::Data.invoices.each do |invoice|
      table.tr do
        table.th(invoice.number, scope: :row)
        table.td(invoice.issued_on.iso8601)
        table.td do
          render NitroKit::Badge.new(
            invoice.status.to_s.humanize,
            id: "gallery-table-invoice-#{invoice.id}-status",
            color: invoice_status_color(invoice.status),
            size: :sm
          )
        end
        table.td(format_amount(invoice), align: :right)
        table.td(align: :right) do
          render NitroKit::Button.new(
            "View",
            id: "gallery-table-invoice-#{invoice.id}-view",
            href: "#invoice-#{invoice.id}",
            size: :sm
          )
        end
      end
    end
  end
end

render NitroKit::Table.new(
  id: "gallery-table-alignment",
  table_html: { id: "gallery-table-alignment-element" }
) do |table|
  table.caption("Deployment timing")
  table.thead do
    table.tr do
      table.th("Environment", align: :left)
      table.th("State", align: :center)
      table.th("Duration", align: :right)
    end
  end
  table.tbody do
    table.tr do
      table.th("Production", scope: :row, align: :left)
      table.td("Operational", align: :center)
      table.td("2m 14s", align: :right)
    end
    table.tr do
      table.th("Staging", scope: :row, align: :left)
      table.td("Queued", align: :center)
      table.td("—", align: :right)
    end
  end
end

render NitroKit::Table.new(
  id: "gallery-table-credentials",
  table_html: { id: "gallery-table-credentials-element" }
) do |table|
  table.caption("API credential inventory")
  table.thead do
    table.tr do
      table.th("Credential and identifier")
      table.th("Access", align: :center)
      table.th("Last used")
      table.th("Actions", align: :right)
    end
  end
  table.tbody do
    Gallery::Data.api_keys.each do |api_key|
      table.tr do
        table.th(scope: :row) do
          strong { api_key.name }
          div { "#{api_key.prefix}••••••••••••••••" }
        end
        table.td(align: :center) do
          render NitroKit::Badge.new(
            api_key.access.to_s.humanize,
            id: "gallery-table-credential-#{api_key.id}-access",
            variant: :outline,
            color: :info,
            size: :sm
          )
        end
        table.td(api_key.last_used_at&.iso8601 || "Never used")
        table.td(align: :right) do
          render NitroKit::ButtonGroup.new(
            id: "gallery-table-credential-#{api_key.id}-actions",
            label: "Actions for #{api_key.name} credential"
          ) do |group|
            group.button(
              "Rotate",
              id: "gallery-table-credential-#{api_key.id}-rotate",
              size: :sm,
            )
            group.button(
              "Revoke",
              id: "gallery-table-credential-#{api_key.id}-revoke",
              size: :sm,
              variant: :destructive
            )
          end
        end
      end
    end
  end
end

render NitroKit::Table.new(
  id: "gallery-table-integrations",
  table_html: { id: "gallery-table-integrations-element" }
) do |table|
  table.caption("Integration delivery and connection status")
  table.thead do
    table.tr do
      table.th("Integration")
      table.th("Purpose and delivery behavior")
      table.th("Status", align: :right)
    end
  end
  table.tbody do
    Gallery::Data.integrations.each do |integration|
      table.tr do
        table.th(integration.name, scope: :row)
        table.td(integration.description)
        table.td(align: :right) do
          render NitroKit::Badge.new(
            integration.status.to_s.humanize,
            id: "gallery-table-integration-#{integration.id}-status",
            color: integration_status_color(integration.status),
            size: :sm
          )
        end
      end
    end
  end
end

render NitroKit::Container.new(size: :sm, id: "gallery-table-constrained-container") do
  render NitroKit::Table.new(id: "gallery-table-constrained") do |table|
    table.caption("Invoice history in a constrained container")
    table.thead do
      table.tr do
        table.th("Invoice")
        table.th("Issued")
        table.th("Status")
        table.th("Amount", align: :right)
        table.th("Action", align: :right)
      end
    end
    table.tbody do
      Gallery::Data.invoices.each do |invoice|
        table.tr do
          table.th(invoice.number, scope: :row)
          table.td(invoice.issued_on.iso8601)
          table.td(invoice.status.to_s.humanize)
          table.td(format_amount(invoice), align: :right)
          table.td("View", align: :right)
        end
      end
    end
  end
end

render NitroKit::Table.new(
  id: "gallery-table-empty",
  table_html: { id: "gallery-table-empty-element" }
) do |table|
  table.caption("API credentials")
  table.thead do
    table.tr do
      table.th("Name")
      table.th("Access")
      table.th("Last used", align: :right)
    end
  end
  table.tbody do
    table.tr do
      table.td(
        "No API credentials have been created.",
        html: { colspan: 3 }
      )
    end
  end
end

sample("Ascending", slug: "table-sort-ascending") do
  render_sort_state_table(sort: :name, direction: :asc, id: "gallery-table-sort-ascending")
end
sample("Descending", slug: "table-sort-descending") do
  render_sort_state_table(sort: :seats, direction: :desc, id: "gallery-table-sort-descending")
end
sample("Unsorted", slug: "table-sort-unsorted") do
  render_sort_state_table(sort: nil, direction: nil, id: "gallery-table-sort-unsorted")
end

render NitroKit::Table.new(
  sort: :owner,
  direction: :asc,
  id: "gallery-table-sort-inventory"
) do |table|
  table.caption("Workspace inventory ordered by owner")
  table.thead do
    table.tr do
      table.th("Workspace", sort: :name, href: "?sort=name-asc")
      table.th(sort: :owner, href: "?sort=owner-desc")
      table.th(sort: :status, href: "?sort=status-asc")
      table.th(sort: :seats, href: "?sort=seats-asc", align: :right)
    end
  end
  table.tbody do
    Gallery::CatalogItem::EXAMPLES.first(4).each do |item|
      table.tr do
        table.th(item.fetch(:name), scope: :row)
        table.td(item.fetch(:owner))
        table.td { render_catalog_status(item.fetch(:status)) }
        table.td(item.fetch(:seats).to_s, align: :right)
      end
    end
  end
end

search = Gallery::CatalogItem.ransack(ransack_parameters)
search.sorts = "name asc" if search.sorts.empty?
sort = Gallery::RansackSort.new(search, path: entry_path(entry), filters: ransack_parameters.except("s"))
relation = search.result(distinct: true)
total_count = relation.count
page = current_page(total_count)
records = relation.offset((page - 1) * PER_PAGE).limit(PER_PAGE)

turbo_frame_tag(FRAME_ID, data: { turbo_action: "advance" }) do
  render NitroKit::Flex.new(dir: :col, gap: 6, align: :stretch, id: "gallery-table-recipe") do
    render_filter_form(sort)
    render_results_table(records, sort)
    render_results_pagination(page:, total_count:, sort:)
  end
end

render NitroKit::Table.new(id: "gallery-table-hostile", sort: :name, direction: :asc) do |table|
  table.caption(Gallery::Hostile::LONG_LABEL)
  table.thead do
    table.tr do
      table.th("Member", sort: :name, href: "?sort=name-desc")
      table.th("Email", sort: :email, href: "?sort=email-asc")
      table.th(Gallery::Hostile::LONG_WORD, sort: :endpoint, href: "?sort=endpoint-asc")
      table.th("Status")
      table.th("Balance", sort: :balance, href: "?sort=balance-asc", align: :right)
      table.th("Actions", align: :right)
    end
  end
  table.tbody do
    Gallery::Hostile.members(40).each_with_index do |member, index|
      table.tr do
        table.th(scope: :row) do
          render NitroKit::Avatar.new(alt: member.name, size: :sm, id: "gallery-table-hostile-avatar-#{index + 1}")
          plain " #{member.name}"
        end
        table.td { a(href: "mailto:#{member.email}") { member.email } }
        table.td do
          a(href: Gallery::Hostile::LONG_URL) { index.even? ? Gallery::Hostile::LONG_URL : Gallery::Hostile::LONG_SLUG }
        end
        table.td do
          render NitroKit::Badge.new(
            Gallery::Hostile::BADGE_LABELS.fetch(index % Gallery::Hostile::BADGE_LABELS.size),
            id: "gallery-table-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)
        table.td(align: :right) do
          render NitroKit::ButtonGroup.new(
            id: "gallery-table-hostile-actions-#{index + 1}",
            label: "Actions for #{member.name}"
          ) do |group|
            group.button(
              Gallery::Hostile::ACTION_LABELS.fetch(index % Gallery::Hostile::ACTION_LABELS.size),
              id: "gallery-table-hostile-action-#{index + 1}",
              size: :sm
            )
            group.button(
              Gallery::Hostile::ACTION_LABELS.fetch(10),
              id: "gallery-table-hostile-delete-#{index + 1}",
              size: :sm,
              variant: :destructive
            )
          end
        end
      end
    end
  end
end

render NitroKit::Container.new(size: :sm, id: "gallery-table-hostile-narrow-container") do
  render NitroKit::Table.new(id: "gallery-table-hostile-narrow") do |table|
    table.caption("Hostile roster in a small container")
    table.thead do
      table.tr do
        table.th("Member")
        table.th("Email")
        table.th("Balance", align: :right)
      end
    end
    table.tbody do
      Gallery::Hostile.members(9).each_with_index do |member, index|
        table.tr do
          table.th(member.name, scope: :row)
          table.td(member.email)
          table.td(index.even? ? Gallery::Hostile::HUGE_MONEY : Gallery::Hostile::NEGATIVE_MONEY, align: :right)
        end
      end
    end
  end
end