Settings layout

render NitroKit::SettingsLayout.new(id: "gallery-settings-layout-workspace") do |layout|
  layout.navigation(label: "Workspace settings") do
    DESTINATIONS.each do |destination, icon|
      layout.item(
        destination.to_s.humanize,
        href: "##{destination}",
        icon:,
        current: destination == :profile
      )
    end
  end
  layout.content do
    render NitroKit::Card.new(id: "gallery-settings-layout-profile-card") do |card|
      card.header do
        card.title("Public profile", level: 4)
        card.description("Shown on your comments and shared documents.")
      end
      card.body do
        render NitroKit::Field.new(
          nil,
          :name,
          id: "gallery-settings-layout-profile-name",
          name: "profile[name]",
          value: "Ada Lovelace",
          label: "Name"
        )
      end
      card.divider
      card.footer do
        card.actions do
          render NitroKit::Button.new(
            "Save profile",
            id: "gallery-settings-layout-profile-save",
            variant: :primary,
            size: :sm
          )
        end
      end
    end
  end
end

sample("One destination", slug: "one") do
  destinations = [ [ "Profile", "#profile", :user_round ] ]

  render NitroKit::SettingsLayout.new(id: "gallery-settings-layout-one") do |layout|
    layout.navigation(label: "Account settings") do
      destinations.each do |text, href, icon|
        layout.item(text, href:, icon:, current: true)
      end
    end
    layout.content do
      render NitroKit::Alert.new(id: "gallery-settings-layout-one-alert") do |alert|
        alert.title("Nothing needs attention")
        alert.description("Your account settings are current.")
      end
    end
  end
end
sample("Dense content", slug: "many") do
  render NitroKit::SettingsLayout.new(id: "gallery-settings-layout-many") do |layout|
    layout.navigation(label: "Operations settings") do
      DESTINATIONS.each do |destination, icon|
        layout.item(
          destination.to_s.humanize,
          href: "##{destination}",
          icon:,
          current: destination == :security
        )
      end
    end
    layout.content do
      render NitroKit::Flex.new(dir: :col, gap: 2, align: :stretch) do
        6.times do |index|
          render NitroKit::Card.new(id: "gallery-settings-layout-many-#{index + 1}", size: :sm) do |card|
            card.description("Policy section #{index + 1}")
          end
        end
      end
    end
  end
end

render NitroKit::SettingsLayout.new(id: "gallery-settings-layout-long") do |layout|
  layout.navigation(label: "Analytical Engines — International Research and Production settings") do
    layout.item(
      "Public organization identity and verified domains",
      href: "#identity",
      icon: :building_2,
      current: true
    )
    layout.item("Credential rotation and browser session policy", href: "#security", icon: :key_round)
    layout.item("Deployment notification delivery preferences", href: "#notifications", icon: :bell)
  end
  layout.content do
    render NitroKit::Card.new(id: "gallery-settings-layout-long-card") do |card|
      card.title("Public organization identity and verified domains", level: 4)
      card.description(
        "These settings apply to every administrator, production environment, customer-visible status " \
          "notification, security event, and invoice issued by this unusually long-named workspace."
      )
    end
  end
end

render NitroKit::SettingsLayout.new(id: "gallery-settings-layout-audit") do |layout|
  layout.navigation(label: "Audit settings") do
    DESTINATIONS.each do |destination, icon|
      layout.item(
        destination.to_s.humanize,
        href: "##{destination}",
        icon:,
        current: destination == :activity
      )
    end
  end
  layout.content do
    render NitroKit::Flex.new(dir: :col, gap: 4, align: :stretch) do
      render NitroKit::Toolbar.new(id: "gallery-settings-layout-audit-toolbar") do |toolbar|
        toolbar.leading { h3 { "Audit retention" } }
        toolbar.trailing do
          render NitroKit::Button.new(
            "Export records",
            id: "gallery-settings-layout-audit-export",
            variant: :primary
          )
        end
      end
      render NitroKit::PaginationBar.new(id: "gallery-settings-layout-audit-pagination-bar") do |bar|
        bar.summary("Showing audit records 1–25 of 240")
        bar.pagination(NitroKit::Pagination.new(label: "Audit record pages")) do |pagination|
          pagination.prev
          pagination.page(1, current: true)
          pagination.page(2, href: "?page=2")
          pagination.next(href: "?page=2")
        end
      end
    end
  end
end

render NitroKit::SettingsLayout.new(id: "gallery-settings-layout-hostile") do |layout|
  layout.navigation(label: Gallery::Hostile::LONG_LABEL) do
    Gallery::Hostile::NAVIGATION_LABELS.each_with_index do |label, index|
      layout.item(
        label,
        href: "#hostile-destination-#{index + 1}",
        icon: :settings,
        current: index == 3
      )
    end
  end
  layout.content do
    render NitroKit::Card.new(id: "gallery-settings-layout-hostile-card") do |card|
      card.title(Gallery::Hostile::LONG_WORD, level: 4)
      card.body do
        p { Gallery::Hostile::LONG_PARAGRAPH }
        p { a(href: Gallery::Hostile::LONG_URL) { Gallery::Hostile::LONG_URL } }
      end
      card.footer do
        render NitroKit::ButtonGroup.new(id: "gallery-settings-layout-hostile-actions", label: "Every hostile setting action") do |group|
          Gallery::Hostile::ACTION_LABELS.each_with_index do |label, index|
            group.button(label, id: "gallery-settings-layout-hostile-action-#{index + 1}", size: :sm)
          end
        end
      end
    end
  end
end