@if(!empty($relatedObjects))
<div class="related-stories block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/related-stories">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="related-stories__divider" data-aos="growline" data-aos-delay="500" data-aos-once="true"></div>
    @if (isset($block->block_title))
        <div class="related-stories__container-title" data-aos="fade-up" data-aos-delay="1000" data-aos-once="true">
            <h2>
                @title($block->block_title)
            </h2>
        </div>
    @endif
    <div class="related-stories__viewport">
        <div class="related-stories__container" data-role="slider" data-aos="fade-up" data-aos-delay="500" data-aos-once="true">
            @foreach($relatedObjects as $i => $item)
                <div class="related-stories__slide" data-role="slide" data-id="{{ $i ?? "" }}">
                    @if($item->image)
                        <div class="related-stories__image-container">
                            <div class="related-stories__image-mask"></div>
                            <img src="{{ getMediaUrl($item->image->filename, '500x640') }}" alt="{{ htmlentities($item->title) }}" />
                        </div>
                    @endif
                    <div class="related-stories__info-container">
                        <span class="related-stories__type">{{ $item->typeLang }}</span>
                        <h5 class="related-stories__title">@title($item->title)</h5>
                        <div class="related-stories__link-container">
                            <a href="{{ lang_url($item->uri) }}" class="related-stories__link">@lang('frontend.read_more')</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="related-stories__navigation" data-role="nav">
        <a class="related-stories__prev" data-action="prev">
            @include('frontend.svg.icon-arrow-blue-down')
        </a>
        @foreach($relatedObjects as $i => $item)
            <div class="related-stories__dot" data-action="dot" data-index="{{ $i }}"></div>
        @endforeach
        <a class="related-stories__next" data-action="next">
            @include('frontend.svg.icon-arrow-blue-down')
        </a>
    </div>
</div>
@endif