{% stories image_style with { title: 'Components/Fields/image-style' } %}

  {% story default with {
    name: 'Default Style',
    args: {
      src: 'latest-update1.png',
      alt: 'latest image',
      width: 200,
      height: 300,
      style_name: 'medium'
    }
  } %}

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

    {#  Ensure image variable only includes attributes #}
    {% set image %}
      {% include 'tailpine:image' with { attributes: attributes } %}
    {% endset %}

    {# Use proper attribute passing #}
    {% embed 'tailpine:image-style' with { attributes: attributes, image: image, style_name: style_name } %}
    {% endembed %}

  {% endstory %}

    {% story Large with {
    name: 'Large',
    args: {
      src: 'latest-update1.png',
      alt: 'latest image',
      width: 400,
      height: 500,
      style_name: 'large'
    }
  } %}

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

    {#  Ensure image variable only includes attributes #}
    {% set image %}
      {% include 'tailpine:image' with { attributes: attributes } %}
    {% endset %}

    {# Use proper attribute passing #}
    {% embed 'tailpine:image-style' with { attributes: attributes, image: image, style_name: style_name } %}
    {% endembed %}

  {% endstory %}

{% endstories %}