{%- if listing | length > 0 -%}

    <div class="row">

        <div class="col-12 col-xxl-9">

            <div class="row gy-40 gy-lg-60 gx-lg-60 gx-xl-80">
        
                {%- for element in listing -%}

                    <div class="col-12 col-md-6">

                        <article class="position-relative">

                            <figure class="card1 d-flex flex-column gap-30 m-0">

                                <div class="card-media">

                                    {%- set image = element.property('featured_image') -%}
                                    {{ image.thumbnail('blog-listing-featured-image').html({
                                        'disableAutoAlt': true,
                                        'alt': get_image_i18n_alt(image, ''),
                                        'useDataSrc': true,
                                        'pictureAttributes': {
                                            'class': 'w-100 h-100 d-block ratio ratio-3x2 overflow-hidden user-select-none pointer-events-none'
                                        },
                                        'imgAttributes': {
                                            'class': 'd-block w-100 h-100 object-fit-cover lazyload'
                                        }
                                    }) | raw  }}

                                </div>
                            
                                <figcaption class="card-body">

                                    {%- set date = element.modificationDate -%}
                                    {%- if element.properties.publish_date is defined and element.properties.publish_date.data -%}
                                        {%- set date = element.properties.publish_date.data -%}
                                    {%- endif -%}

                                    <time
                                        class="d-block b2 text-primary mb-15"
                                        datetime="{{ date | format_datetime(pattern: 'yyyy-MM-dd hh:mm:ss',  locale: app.request.locale) }}"
                                    >
                                        {{ date | format_datetime(pattern: 'dd.MM.yyyy',  locale: app.request.locale) }}
                                    </time>
                                
                                    <div class="h4 mb-30 mb-lg-50">
                                    
                                        <a href="{{ element.href }}" class="text-body text-decoration-none stretched-link">
                                            {{ element.property('navigation_name') }}
                                        </a>

                                    </div>
                                    
                                    <div class="cta" aria-hidden="true">{{ 'blog.detail_preview.cta' | trans }}</div>

                                </figcaption>
                            
                            </figure>

                        </article>

                    </div>

                {%- endfor -%}
        
            </div>
            
            <div class="d-flex justify-content-between mt-60 mt-lg-100">

                {%- set page_query = 'paginator.page_query' | trans -%}

                {%- if paginator.previous is defined -%}
                    <a class="cta reversed" href="{{  pimcore_url({(page_query): paginator.previous}) }}">{{ 'paginator.previous_page' | trans }}</a>
                {%- else -%}
                    <div class="cta reversed text-gray">{{ 'paginator.previous_page' | trans }}</div>
                {%- endif -%}

                {%- if paginator.next is defined -%}
                    <a class="cta" href="{{  pimcore_url({(page_query): paginator.next}) }}">{{ 'paginator.next_page' | trans }}</a>
                {%- else -%}
                    <div class="cta text-gray">{{ 'paginator.next_page' | trans }}</div>
                {%- endif -%}

            </div>

        </div>

    </div>

{%- endif -%}