<%= pb_rails("body") do%>
    This is the <%= pb_rails("highlight") do%>Highlight Kit<% end %>.
<% end %>

<%= pb_rails("body", props: {padding_bottom: "md"}) do%>
    Hello this is a <%= pb_rails("highlight") do%>highlight<% end %> wrapped.
<% end %>

<%= pb_rails("body", props: {text: "This is text highlighted in the Body Kit using the text prop.", highlighting: true, highlighted_text: ["highlighted", "Body Kit"]})%>

<%= pb_rails("message", props: {
  label: "Anna Black",
  message: "How can we assist you today?",
  timestamp: "20 seconds ago",
  avatar_name: "Mike Bishop",
  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
  avatar_status: "online"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Patrick Welch",
  message: "We'll escalate this issue to a Senior Support agent.",
  timestamp: "9 minutes ago",
  avatar_name: "Wade Winningham",
  avatar_url: "https://randomuser.me/api/portraits/men/14.jpg",
  align_timestamp: "left"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Lucille Sanchez",
  message: "Application for Kate Smith is waiting for your approval",
  timestamp: "4 hours ago",
  avatar_name: "Becca Jacobs",
  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Beverly Reyes",
  message: "We're so sorry you had a bad experience!",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Keith Craig",
  message: "Please hold for one moment, I'll check with my manager.",
  timestamp: "2 days ago"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "",
  message: "We're so sorry you had a bad experience!",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) do %>
  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
<% end %>

<br><br>

<%= pb_rails("message", props: {
  label: "",
  message: "Please hold for one moment, I'll check with my manager.",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) do %>
  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
<% end %>

<%= pb_rails("message", props: {
  label: "Anna Black",
  message: "Hover over me to check out the real time I was made!",
  timestamp: "4 hours ago",
  timestamp_object: DateTime.current,
  avatar_name: "Lisa Thompson",
  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
}) %>
<br><br>
<%= pb_rails("message", props: {
  label: "Becca Jacobs",
  message: "Application for Kate Smith is waiting for your approval",
  timestamp: "12.20p",
  align_timestamp: "left",
  timestamp_object: DateTime.current,
  avatar_name: "Lisa Thompson",
  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
}) %>

<%= pb_rails("message", props: {
  avatar_name: "Mike Bishop",
  avatar_status: "online",
  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
  border_radius: "rounded",
  hover: { background: "success_subtle" },
  label: "Anna Black",
  message: "How can we assist you today?",
  padding: "xs",
}) %>

<br><br>

<%= pb_rails("message", props: {
  align_timestamp: "left",
  avatar_name: "Lucille Sanchez",
  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg",
  border_radius: "rounded",
  hover: { shadow: "deepest" },
  label: "Becca Jacobs",
  message: "Application for Kate Smith is waiting for your approval",
  padding: "xs",
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Keith Craig",
  timestamp: "2 days ago",
  avatar_name: "Keith Craig",
  padding_bottom: "md"
}) do %>
  <%= pb_rails("message/message_mention", props: { variant: "user" }) do %>
    @all
  <% end %> let's welcome 
  <%= pb_rails("message/message_mention", props: { variant: "self" }) do %>
    @Lucille Sanchez
  <% end %> to the team this week!
<% end %>

<%= pb_rails("message", props: {
  label: "Lucille Sanchez",
  timestamp: "2 days ago",
  avatar_name: "Lucille Sanchez",
  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
}) do %>
  <%= pb_rails("message/message_mention", props: {variant: "self"}) do %>
    @Keith Craig
  <% end %> thanks for the warm welcome! I'm so excited!
<% end %>

<%= pb_rails("message", props: {
  label: "Mike Bishop",
  message: "So long, and thanks for all the fish!",
  timestamp: "3 months ago",
  avatar_name: "Mike Bishop",
  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
  avatar_status: "offline",
  avatar_grayscale: true,
}) %>