Result

<%= render(Hakumi::Result::Component.new(
  id: "result-success",
  status: :success,
  title: "Order received",
  sub_title: "We will email you once the shipment is scheduled.",
  extra: render(Hakumi::Button::Component.new(type: :primary)) { "Back to orders" }
)) %>

<%= render(Hakumi::Result::Component.new(
  id: "result-info",
  status: :info,
  title: "Awaiting review",
  sub_title: "We’ll notify you once your submission has been approved.",
  extra: render(Hakumi::Button::Component.new(type: :link)) { "View submission" }
)) %>

<%= render(Hakumi::Result::Component.new(
  id: "result-warning",
  status: :warning,
  title: "Action required",
  sub_title: "Review the highlighted information before proceeding.",
  extra: render(Hakumi::Space::Component.new) do |space|
    space.with_item { render(Hakumi::Button::Component.new(type: :primary)) { "Review details" } }
    space.with_item { render(Hakumi::Button::Component.new) { "Dismiss" } }
  end
)) %>

<%= render(Hakumi::Result::Component.new(
  id: "result-error",
  status: :error,
  title: "Payment failed",
  sub_title: "We could not process your payment. Please update your card info and try again.",
)) do %>
  <%= render(Hakumi::Typography::Paragraph::Component.new(type: :secondary)) do %>
    The system will keep this order on hold for 24 hours before cancelling it automatically.
  <% end %>
  <%= render(Hakumi::Space::Component.new(style: "margin-top: 16px;")) do |space| %>
    <% space.with_item do %>
      <%= render(Hakumi::Button::Component.new(type: :primary, danger: true)) { "Retry payment" } %>
    <% end %>
    <% space.with_item do %>
      <%= render(Hakumi::Button::Component.new) { "Change method" } %>
    <% end %>
  <% end %>
<% end %>

<%= render(Hakumi::Result::Component.new(
  id: "result-without-icon",
  status: :warning,
  title: "Action required",
  sub_title: "Review the highlighted items before continuing.",
  icon: false,
  extra: render(Hakumi::Space::Component.new) do |space|
    space.with_item do
      render(Hakumi::Button::Component.new(type: :primary)) { "Resolve issues" }
    end
    space.with_item do
      render(Hakumi::Button::Component.new) { "Dismiss" }
    end
  end
)) do %>
  <%= render(Hakumi::Typography::Paragraph::Component.new(type: :secondary)) do %>
    This variant hides the illustration entirely by passing <code>icon: false</code>.
  <% end %>
<% end %>

<%= render(Hakumi::Space::Component.new) do |space| %>
  <% space.with_item do %>
    <%= render(Hakumi::Button::Component.new(id: "prog-result-create", type: :primary)) { "Create result (no SVG)" } %>
  <% end %>
  <% space.with_item do %>
    <%= render(Hakumi::Button::Component.new(id: "prog-result-clear")) { "Clear results" } %>
  <% end %>
<% end %>

<%= render(Hakumi::Flex::Component.new(
  id: "result-programmatic-target",
  vertical: true,
  gap: "16px",
  style: "margin-top: 16px;"
)) { "" } %>

<script>
  (() => {
    const wire = () => {
      if (!window.HakumiComponents?.renderComponent) return false

      const targetSelector = "#result-programmatic-target"
      const createButton = document.getElementById("prog-result-create")
      const clearButton = document.getElementById("prog-result-clear")

      createButton?.addEventListener("click", () => {
        window.HakumiComponents.renderComponent("result", {
          params: {
            status: "info",
            icon: false,
            title: "Programmatic result",
            sub_title: `Generated at ${new Date().toLocaleTimeString()}`,
            extra: "You can add actions here"
          },
          target: targetSelector,
          mode: "append"
        })
      })

      clearButton?.addEventListener("click", () => {
        const target = document.querySelector(targetSelector)
        if (target) target.innerHTML = ""
      })

      return true
    }

    if (wire()) return

    const onReady = () => {
      if (wire()) {
        document.removeEventListener("turbo:load", onReady)
        window.removeEventListener("load", onReady)
      }
    }

    document.addEventListener("turbo:load", onReady)
    window.addEventListener("load", onReady)
  })()
</script>