{% if data is not empty %}
    <img 
        class="ui tiny bordered image"
        data-slug="{{ data.slug }}" 
        src="{{ data.filename|imagine_filter('thumbnail_webp') }}"
    />
    {# <img 
        class="ui tiny bordered image"  
        data-slug="{{ data.slug }}" 
        src="{{ asset('media/image/' ~ data.filename) }}"
    /> #}
    <div class="ui modal image_modal" data-slug="{{ data.slug }}">
        <i class="close icon"></i>
        <div class="image content">
            <div class="ui centered big image">
            {# <img 
                class="ui bordered image" 
                src="{{ data.filename|imagine_filter('full_webp') }}"
            />  #}
             <img 
                class="ui bordered image" 
                src="{{ asset('media/image/' ~ data.filename) }}"
            />
            </div>
        </div>
    </div>
{% else %}
    <img 
        class="ui tiny bordered image" 
        src="{{ asset('build/app/images/image-not-found.jpg') }}" 
        alt="Image not found"
    >
{% endif %}