
<%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
<%= pb_rails("button", props: { text: "Default Status", data: {"open-dialog": "dialog-status-default"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Caution Status", data: {"open-dialog": "dialog-status-caution"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-status-delete"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Information Status", data: {"open-dialog": "dialog-status-info"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Error Status", data: {"open-dialog": "dialog-status-error"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
<% end %>

<%= pb_rails("dialog", props: { 
    id:"dialog-status-default", 
    status: "default",
    size: "status_size", 
    title: "Are you sure?", 
    text: "Text explaining why there is an alert", 
}) do %>
    <%= pb_rails("dialog/dialog_footer") do %>
        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
            <%= pb_rails("button", props: { text: "Yes, Action" }) %>
            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-default" } }) %>
        <% end %>
    <% end %>
<% end %>

<%= pb_rails("dialog", props: { 
    id:"dialog-status-info", 
    status: "info",
    size: "status_size", 
    title: "Information", 
    text: "Text explaining why there is an alert", 
}) do %>
    <%= pb_rails("dialog/dialog_footer") do %>
        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
            <%= pb_rails("button", props: { text: "Ok, Thanks!", full_width: true, data: {"close-dialog": "dialog-status-info" } }) %>
        <% end %>
    <% end %>
<% end %>

<%= pb_rails("dialog", props: { 
    id:"dialog-status-caution", 
    status: "caution",
    size: "status_size", 
    title: "Are you Sure?", 
    text: "This is the action you will be taking", 
}) do %>
    <%= pb_rails("dialog/dialog_footer") do %>
        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
            <%= pb_rails("button", props: { text: "Yes, Action" }) %>
            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-caution" } }) %>
        <% end %>
    <% end %>
<% end %>

<%= pb_rails("dialog", props: { 
    id:"dialog-status-delete", 
    status: "delete",
    size: "status_size", 
    title: "Delete", 
    text: "You are about to delete ...", 
}) do %>
    <%= pb_rails("dialog/dialog_footer") do %>
        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
            <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
        <% end %>
    <% end %>
<% end %>

<%= pb_rails("dialog", props: { 
    id:"dialog-status-error", 
    status: "error",
    size: "status_size", 
    title: "Error Message", 
    text: "Text explaining the error", 
}) do %>
    <%= pb_rails("dialog/dialog_footer") do %>
        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
            <%= pb_rails("button", props: { text: "Oh no!", full_width: true, data: {"close-dialog": "dialog-status-error" } }) %>
        <% end %>
    <% end %>
<% end %>

<%= pb_rails("dialog", props: { 
    id:"dialog-status-success", 
    status: "success",
    size: "status_size", 
    title: "Success!", 
    text: "Text explaining what is successful", 
}) do %>
    <%= pb_rails("dialog/dialog_footer") do %>
        <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
            <%= pb_rails("button", props: { text: "Great!", full_width: true, data: {"close-dialog": "dialog-status-success" } }) %>
        <% end %>
    <% end %>
<% end %>