<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>

<%= pb_rails("dialog", props: { 
    id:"dialog-1", 
    size: "sm", 
    title: "Header Title is the Title Prop", 
    text: "Hello Body Text, Nice to meet ya.", 
    cancel_button: "Cancel Button", 
    confirm_button: "Okay", 
    confirm_button_id: "confirm-button-1"
}) %>

<% 
  options = [
    {
      label: "United States",
      value: "unitedStates",
      id: "us"
    },
    {
      label: "United Kingdom",
      value: "unitedKingdom",
      id: "gb"
    },
    {
      label: "Pakistan",
      value: "pakistan",
      id: "pk"
    }
  ]
%>

<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>

<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
  <%= pb_form_with(scope: :example, method: :get, url: "", options: { remote: true }) do |form| %>
    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
    <% end %>
    <%= pb_rails("dialog/dialog_body") do %>
        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
        <%= pb_rails("textarea", props: {id: "default"}) %>
        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
        <%= pb_rails("typeahead", props: {
        id: "typeahead-default",
        placeholder: "Select one...",
        options: options,
        name: :foo,
        margin_top: "sm",
        is_multi: false
      })
%>

    <% end %>
    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
  <% end %>
<% end %>

<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"}, margin_right: "md" }) %>

<%= pb_rails("dialog", props: { 
    id:"dialog-sm", 
    size: "sm", 
    title: "Header on small dialog",
    text: "Body on small dialog",
    cancel_button: "Cancel", 
    confirm_button: "Okay", 
   }) %>

<%= pb_rails("dialog", props: { 
    id:"dialog-md", 
    size: "md",
    title: "Title on medium dialog",
    text: "Body on medium dialog",
    cancel_button: "Cancel", confirm_button: "Okay", 
     })  %>
     
<%= pb_rails("dialog", props: { 
    id:"dialog-lg", size: "lg",
    title: "Header on large dialog",
    text: "Body on large dialog",
    cancel_button: "Cancel", 
    confirm_button: "Okay"
     }) %>

<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Open Full Height Dialog", data: {"open-dialog": "dialog-scroll-full-height"}, margin_right: "md" }) %>

<%= pb_rails("dialog", props: { 
    id:"dialog-scroll", 
    size: "md", 
    title: "Header Title is the Title Prop", 
    text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.", 
    cancel_button: "Cancel", 
    confirm_button: "Confirm", 
    confirm_button_id: "confirm-button-1"
}) %>

<%= pb_rails("dialog", props: { 
    full_height: true,
    id:"dialog-scroll-full-height", 
    size: "sm", 
    title: "Header Title is the Title Prop", 
    text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.", 
    cancel_button: "Cancel", 
    confirm_button: "Confirm", 
    confirm_button_id: "confirm-button-1"
}) %>

<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-overlay-click"} }) %>

<%= pb_rails("dialog", props: { 
    id:"dialog-overlay-click", 
    size: "sm", 
    title: "Neat Header", 
    text: "Click on the overlay all day. I will stay open.", 
    cancel_button: "Cancel", 
    confirm_button: "Okay", 
    confirm_button_id: "confirm-button-1",
    should_close_on_overlay_click: false,
}) %>

<%= 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", variant: "danger" }) %>
            <%= 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 %>

<%= pb_rails("button", props: { text: "Default Status", data: {"open-dialog": "dialog-stacked-default"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Caution Status", data: {"open-dialog": "dialog-stacked-caution"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>

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

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

<%= pb_rails("dialog", props: {
    id:"dialog-stacked-delete",
    status: "delete",
    size: "sm",
    title: "Delete",
    text: "You are about to delete ...",
}) do %>
    <%= pb_rails("dialog/dialog_footer") do %>
        <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
            <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
            <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
        <% end %>
    <% end %>
<% end %>

<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-fullheight-sm"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-fullheight-md"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-fullheight-lg"}, margin_right: "md" }) %>

<%= pb_rails("dialog", props: { 
    id:"dialog-fullheight-sm", 
    size: "sm", 
    full_height: true,
   }) do %>
    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-sm" } ) do %>
        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
    <% end %>
    <%= pb_rails("dialog/dialog_body") do %>
        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
        <%= pb_rails("textarea", props: {id: "default-7"}) %>
        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>

    <% end %>
    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-sm"}) %>
<% end %>

<%= pb_rails("dialog", props: { 
    id:"dialog-fullheight-md", 
    size: "md",
    full_height: true,
     }) do %>
        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-md" } ) do %>
            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
        <% end %>
        <%= pb_rails("dialog/dialog_body") do %>
            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
            <%= pb_rails("textarea", props: {id: "default-8"}) %>
            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
    
        <% end %>
        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-md"}) %>
<% end %>
     
<%= pb_rails("dialog", props: { 
    id:"dialog-fullheight-lg", 
    size: "lg",
    full_height: true,
     }) do %>
        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-lg" } ) do %>
            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
        <% end %>
        <%= pb_rails("dialog/dialog_body") do %>
            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
            <%= pb_rails("textarea", props: {id: "default-9"}) %>
            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
    
        <% end %>
        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-lg"}) %>
<% end %>

<%= pb_rails("button", props: { text: "Left Dialog", data:{"open-dialog": "dialog-fullheight-left"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Center Dialog", data:{"open-dialog": "dialog-fullheight-center"}, margin_right: "md" }) %>
<%= pb_rails("button", props: { text: "Right Dialog", data:{"open-dialog": "dialog-fullheight-right"}, margin_right: "md" }) %>

<%= pb_rails("dialog", props: { 
    id:"dialog-fullheight-left", 
    size: "md", 
    full_height: true,
    placement: "left",
   }) do %>
    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-left" } ) do %>
        <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
    <% end %>
    <%= pb_rails("dialog/dialog_body") do %>
        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
        <%= pb_rails("textarea", props: {id: "default-2"}) %>
        <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
        <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
    <% end %>
    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-left"}) %>
<% end %>

<%= pb_rails("dialog", props: { 
    id:"dialog-fullheight-center", 
    size: "md",
    full_height: true,
    placement: "center",
     })  do %>
        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-center" } ) do %>
            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
        <% end %>
        <%= pb_rails("dialog/dialog_body") do %>
            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
            <%= pb_rails("textarea", props: {id: "default-3"}) %>
            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
        <% end %>
        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-center"}) %>   
<% end %>
     
<%= pb_rails("dialog", props: { 
    id:"dialog-fullheight-right", 
    size: "md",
    full_height: true,
    placement: "right",
     }) do %>
        <%= pb_rails("dialog/dialog_header", props: { id: "dialog-fullheight-right" } ) do %>
            <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
        <% end %>
        <%= pb_rails("dialog/dialog_body") do %>
            <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
            <%= pb_rails("textarea", props: {id: "default-4"}) %>
            <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
            <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
        <% end %>
        <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-fullheight-right"}) %>    
    <% end %>

<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>

<%= pb_rails("dialog", props: {
    id:"dialog-loading",
    size: "sm",
    title: "Loading Example",
    text: "Make a loading request?",
    cancel_button: "Cancel Button",
    cancel_button_id: "cancel-button-loading",
    confirm_button: "Okay",
    confirm_button_id: "confirm-button-loading",
    loading: true,
}) %>

<script>
    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
    if (loadingButton) {
        loadingButton.addEventListener("click", function() {
        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
        let currentClass = okayLoadingButton.className;
        let cancelClass = cancelButton ? cancelButton.className : "";

        okayLoadingButton.disabled = true;
        okayLoadingButton.classList.add("pb_button_loading");
        okayLoadingButton.classList.remove("pb_button_enabled");
        okayLoadingButton.classList.add("pb_button_disabled");

        if (cancelButton) {
            cancelButton.disabled = true;
            cancelButton.classList.remove("pb_button_enabled");
            cancelButton.classList.add("pb_button_disabled");
        }

        setTimeout(function() {
            okayLoadingButton.disabled = false;
            okayLoadingButton.classList.remove("pb_button_loading");
            okayLoadingButton.classList.remove("pb_button_disabled");
            okayLoadingButton.classList.add("pb_button_enabled");

            if (cancelButton) {
            cancelButton.disabled = false;
            cancelButton.classList.remove("pb_button_disabled");
            cancelButton.classList.add("pb_button_enabled");
            }
        }, 5000);

        });
  }
</script>

<%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
    <%= pb_rails("button", props: { id: "button-open-example-turbo-frames", margin_right: "md", text: "Open Dialog via Custom Event" }) %>
    <%= pb_rails("button", props: { id: "open-dialog-button", data: { open_dialog: "dialog-confirm-turbo-frames" }, margin_right: "md", text: "Custom Event Linked to Confirm Button" }) %>
    <%= pb_rails("button", props: { id: "button-open-multi-dialog", text: "Mutliple Events Example" }) %>
<% end %>

<!-- Example 1: Basic dialog with custom event opening -->
<%= pb_rails("dialog", props: { 
  id: "dialog-open-turbo-frames", 
  title: "Click Event Simulation", 
  text: "Demonstrating Opening the Dialog with a Custom Event.",
  custom_event_type: "dialogOpen",
  cancel_button: "Cancel Button",
  confirm_button: "Okay", 
  confirm_button_id: "confirm-button-turbo-frames"
}) %>

<script>
    document.getElementById("button-open-example-turbo-frames").addEventListener("click", () => {
        console.log("📣 Dispatching 'dialogOpen' custom event")

        window.dispatchEvent(new CustomEvent("dialogOpen", { 
            bubbles: true,
            detail: { 
                dialogId: "dialog-open-turbo-frames",
                action: "open"
            }
        }))

        console.log("✅ Custom event dispatched - dialog should open")
    })
</script>

<!-- Example 2: Dialog with custom event linking confirm button to closing the dialog-->
<%= pb_rails("dialog", props: { 
  id: "dialog-confirm-turbo-frames", 
  title: "Custom Event Button Action", 
  text: "Clicking this dialog's confirm button triggers closing the dialog as well.",
  custom_event_type: "turboResponse",
  cancel_button: "Cancel",
  cancel_button_id: "cancel-button-id-turbo-frames",
  confirm_button: "Confirm Button", 
  confirm_button_id: "confirm-button-id-turbo-frames"
}) %>

<script>
  window.addEventListener("turboResponse", (event) => {
    const { dialogId, action, cancelButtonId } = event.detail || {}
    console.log("📦 turboResponse event triggered:", { dialogId, action, cancelButtonId })

    if (action === "close" && cancelButtonId) {
        const dialog = document.getElementById(dialogId)
        if (dialog?.close) {
          console.log("🚪 Closing dialog programmatically")
          dialog.close()
        }
    }
  })

  document.getElementById("confirm-button-id-turbo-frames").addEventListener("click", function () {
    console.log("✅ Confirm button clicked! Triggering cancel via turboResponse")

    window.dispatchEvent(new CustomEvent("turboResponse", {
      detail: {
        dialogId: "dialog-confirm-turbo-frames",
        action: "close", 
        cancelButtonId: "cancel-button-id-turbo-frames"
      }
    }))
  })
</script>

<!-- Example 3: Dialog with multiple custom event types -->
<%= pb_rails("dialog", props: { 
  id: "multi-event-dialog", 
  title: "Multiple Event Types", 
  text: "This dialog responds to multiple custom event types - see console logs.",
  custom_event_type: "dialogOpenMutli,turboResponseMulti",
  cancel_button: "Cancel",
  cancel_button_id: "multi-event-cancel",
  confirm_button: "Confirm", 
  confirm_button_id: "multi-event-confirm"
}) %>

<script>
  document.getElementById("button-open-multi-dialog").addEventListener("click", () => {
    console.log("📣 Dispatching 'dialogOpenMutli' custom event")
    window.dispatchEvent(new CustomEvent("dialogOpenMutli", { 
      detail: { 
        dialogId: "multi-event-dialog",
        action: "open"
      }
    }))
  })

  document.getElementById("multi-event-confirm")?.addEventListener("click", function() {
    console.log("✅ Confirm clicked — dispatching 'turboResponseMulti' to simulate dialog close")

    window.dispatchEvent(new CustomEvent("turboResponseMulti", {
      detail: {
        dialogId: "multi-event-dialog",
        action: "close",
        cancelButtonId: "multi-event-cancel"
      }
    }))
  })

  window.addEventListener("turboResponseMulti", (event) => {
    const { dialogId, action, cancelButtonId } = event.detail || {}
  
    if (action === "close" && dialogId) {
      const dialog = document.getElementById(dialogId)
      dialog.close?.()
      console.log("🚪 Closing dialog programmatically")
    }
  })
</script>

<% 
  typeahead_options = [
    {
      label: "United States",
      value: "unitedStates",
      id: "us"
    },
    {
      label: "United Kingdom",
      value: "unitedKingdom",
      id: "gb"
    },
    {
      label: "Canada",
      value: "canada",
      id: "ca"
    },
    {
      label: "Australia",
      value: "australia",
      id: "au"
    },
    {
      label: "Germany",
      value: "germany",
      id: "de"
    },
    {
      label: "France",
      value: "france",
      id: "fr"
    },
    {
      label: "Japan",
      value: "japan",
      id: "jp"
    },
    {
      label: "Brazil",
      value: "brazil",
      id: "br"
    }
  ]
%>

<%= pb_rails("button", props: { text: "Open Dialog with Overflow Visible", data: {"open-dialog": "dialog-overflow-visible"} }) %>

<%= pb_rails("dialog", props: { 
    id: "dialog-overflow-visible", 
    size: "md", 
    overflow: "visible"
}) do %>
  <%= pb_rails("dialog/dialog_header", props: { id: "dialog-overflow-visible" } ) do %>
    <%= pb_rails("body", props: { text: "Select Location" }) %>
  <% end %>
  <%= pb_rails("dialog/dialog_body") do %>
    <%= pb_rails("typeahead", props: {
      options: typeahead_options,
      placeholder: "Select a location...",
      id: "location-typeahead",
      is_multi: false,
    }) %>
  <% end %>
  <%= pb_rails("dialog/dialog_footer", props: {
    cancel_button: "Cancel",
    confirm_button: "Save",
    confirm_button_id: "confirm-overflow-visible",
    id: "dialog-overflow-visible"
  }) %>
<% end %>

<%= pb_rails("flex", props:{wrap:true}) do %>
<%= pb_rails("button", props: { text: "Open Simple Dialog", data: {"open-dialog": "dialog-simple"}, margin_right:"md" }) %>
<%= pb_rails("button", props: { text: "Open Complex Dialog", data: {"open-dialog": "dialog-complex2"} }) %>
<% end %>

<%= pb_rails("dialog", props: { 
    id:"dialog-simple", 
    size: "sm", 
    title: "Header Title is the Title Prop", 
    text: "Hello Body Text, Nice to meet ya.", 
    cancel_button: "Cancel Button", 
    closeable: false,
    confirm_button: "Okay", 
    confirm_button_id: "confirm-button-simple"
}) %>

<%= pb_rails("dialog", props: { 
    id:"dialog-complex2", 
    size: "sm"
}) do %>
 <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex2", title:"Header Title inside Dialog Header", closeable: false } ) %>
    <%= pb_rails("dialog/dialog_body", props:{text: "Hello Body Text, Nice to meet ya."}) %>
    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel Button", confirm_button: "Okay", confirm_button_id:"confirm-complex2", id: "dialog-complex2"}) %>
<% end %>