{# BLOCK MOSAIC #}
{% import 'blocks\\settings.default.html.twig' as styles %}
    <section {% if settings.extra_block_id|default %} id="{{ settings.extra_block_id|default}}" {% endif %} class="block-30-mosaic {{ settings.extra_class|default }}" >
        <div class="{% if settings.container|default %} container {% else %} container-fluid px-0 {% endif %}">
            <div class="mosaic-layout" >               
                {% for item in repeatable %}
                    {% if item.image|default %}
                        <div class="item" >                        
                            {% if item.url|default or item.page|default %}                               
                                {% set finalurl=item.url|default %}
                                {% if item.page|default %}  
                                    {% set pageInfo=get_page_info(app.request.locale, item.page) %} 
                                    {% if finalurl|trim is empty %} 
                                        {% set finalurl = pageInfo.url %}
                                    {% endif %}
                                {% endif %} 
                                <a href="{{ finalurl }}" target="{{ item.target|default }}">
                            {% endif %}
                                <picture>                           
                                    <source media="(min-width: 992px)" srcset="{{ item.image|imagine_filter('mosaic') }}">
                                    <source media="(min-width: 1200px)" srcset="{{ item.image|imagine_filter('mosaic_1500') }}">
                                    <source media="(min-width: 1500px)" srcset="{{ item.image|imagine_filter('mosaic_1920') }}">
                                    <source media="(min-width: 1920px)" srcset="{{ item.image|imagine_filter('mosaic_2560') }}">                                                   
                                
                                    <!-- imagem mobile no src -->
                                    <img src="{{ item.image|imagine_filter('gallery_thumb')|urldecode }}" loading="lazy" alt="{{ item.image_alt|default }}" title="{{ item.image_title|default }}">
                                </picture>                       
                                <div class="mask {{ item.image_filter|default}}"></div>
                                <div class="container container-description">
                                    <div class="text">
                                     {% if item.url|default or item.page|default %}
                                        {# o ideal era permitir todas as tags excepto a tag <a> #}
                                        {{ item.text|striptags('<br><p><h1><h2><h3><h4><h5><h6><span><ol><ul><span><b><strong><div>')|default|raw }}
                                     {% else %}
                                        {{ item.text|default|raw }}
                                    {% endif %}
                                    </div>
                                </div>
                            {% if item.url|default or item.page|default %}
                                </a>
                            {% endif %}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </section>
{# @END BLOCK MOSAIC #}