<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
<br/>
<%= pb_rails("image", props: { alt: "picture of a misty forest", url: "https://unsplash.it/500/400/?image=634" }) %>

<%= pb_rails("image", props: { alt: "", rounded: true, size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>

<br>

<%= pb_rails("image", props: { alt: "", rounded: true, size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>

<br>

<%= pb_rails("image", props: { alt: "", rounded: true, size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>

<br>

<%= pb_rails("image", props: { alt: "", rounded: true, size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>

<br>

<%= pb_rails("image", props: { alt: "", rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>

<style>
  .image-error:before {
    content: "Sorry, the image below seems to be broken.";
    display: block;
    margin-bottom: 10px;
  }
  .image-error {
    margin: 5px;
    padding: 5px;
    outline: 1px solid red;
  }
</style>

<%= pb_rails("body",
  props: {
    text: "Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time."
  }
) %>

<br>
<br>

<%= pb_rails("body",
  props: {
    text: "Alter the display when the image fails to load:"
  }
) %>

<%= pb_rails("image",
  props: {
    alt: "This is the alt text!",
    on_error: "this.style.color = 'red'",
    rounded: true,
    size: "xs",
    url: "not_a_picture"
  }
) %>

<br>
<br>

<%= pb_rails("body",
  props: {
    text: "Give it an error class:"
  }
) %>

<%= pb_rails("image",
  props: {
    alt: "This is the alt text!",
    on_error: "this.classList.add('image-error')",
    padding_x: "none",
    rounded: true,
    size: "xs",
    url: "not_a_picture"
  }
) %>

<br>
<br>

<%= pb_rails("body",
  props: {
   text: "Or hide it completely:"
  }
) %>

<%= pb_rails("image",
  props: {
    alt: "This is the alt text!",
    on_error: "this.style.display = 'none'",
    rounded: true,
    size: "xs",
    url: "not_a_picture",
  }
) %>

<%= pb_rails("flex") do %>
  <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
    <%= pb_rails("select", props: {
    id: "transition-dropdown",
    label: "",
    blank_selection: "Select a Transition...",
    options: [
        {
          value: 'fade',
        },
        {
          value: 'blur',
        },
        {
          value: 'scale',
        },
    ]
    }) %>
  <% end %>
    <%= pb_rails("flex/flex_item") do %>
      <%= pb_rails("button", props: {classname: "button", text: "Load Image", margin_left: "sm", margin_top: "xs", disabled: true }) %>
    <% end %>
<% end %>
<%= pb_rails("image",  props: { classname: "transition-image", alt: "picture of a misty forest", url: "", on_error: "this.style.display = 'none'" }) %>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const button = document.querySelector(".button")
        const transitionDropdown = document.querySelector("#transition-dropdown")
        var option = ''

        transitionDropdown.addEventListener('change', function() {
          if (this.value === '') {
            button.className = button.className + ' _disabled'
          } else {
            button.removeAttribute("disabled");
            button.className = button.className.replace(/\_disabled/gi, '')
            option = this.value
          }
        });

        const updateTransition = (transition) => {
          const imageTransition = document.querySelector('.transition-image')
            imageTransition.removeAttribute("style")
            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
            imageTransition.classList.add(transition, "lazyload")
            imageTransition.src = "https://unsplash.it/500/400/?image=634"
        }
      
        button.addEventListener('click', function() {
          updateTransition(option)
        })
    });
</script>