{% stories image_formatter with { title: 'Components/Fields/Image Formatter' } %}

  {% story default with {
    name: 'Default Image Formatter',
    args: {
      src: 'latest-update1.png',
      alt: 'Latest image',
      width: 200,
      height: 300,
      style_name: 'medium',
      url: 'node/11'
    }
  } %}

    {% set attributes = create_attribute()
        .setAttribute('src', src)
        .setAttribute('alt', alt)
        .setAttribute('width', width)
        .setAttribute('height', height)
        .addClass('image-style-' ~ style_name)
    %}

    <!-- Directly render the <img> tag if tailpine:image isn't working -->
    {% set image = '<img ' ~ attributes ~ ' />' %}

    {% embed "tailpine:image-formatter" with { image: image, url: url } %}
{% endembed %}
  {% endstory %}

{% endstories %}
