<div class="stories-slider block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/stories-slider">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="stories-slider__wrap"  data-aos="fade">
        <div class="stories-slider__header">
            @if ($block->block_title)
                <h2>@title($block->block_title)</h2>
            @endif
            {!! $block->content !!}
        </div>
        <div class="swiper swiper-container stories-slider__slider" data-role="slider">
            <div class="swiper-wrapper">
                @for($i = 0; $i < 2; $i++)
                    @foreach ($block->stories as $story)
                        <div class="swiper-slide" data-role="cta-block">
                            @if ($story->image)
                                <div class="stories-slider__slider-img" data-action="click-cta">
                                    <picture>
                                        <source media="(min-width: 768px)" srcset="{{ getMediaUrl($story->image->filename, '1000x1200') }}.webp" type="image/webp">
                                        <source media="(min-width: 768px)" srcset="{{ getMediaUrl($story->image->filename, '1000x1200') }}">
                                        <source srcset="{{ getMediaUrl($story->image->filename, '500x600') }}.webp" type="image/webp">
                                        <img src="{{ getMediaUrl($story->image->filename, '500x600') }}" alt="{{ htmlentities($story->title) }}">
                                    </picture>
                                </div>
                            @endif
                            <div class="stories-slider__slide-legend">
                                <a href="#" data-action="open-detail" data-story="{{ $story->id }}">
                                    <div class="open-detail__title">Read @title($story->title)</div>
                                    <div class="open-detail__subtitle">@title($story->subtitle)</div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                @endfor
            </div>
            <div class="stories-slider__nav-prev" data-action="prev"></div>
            <div class="stories-slider__nav-next" data-action="next"></div>
        </div>
    </div>
    <div class="stories-slider__modal modal-overlay" data-role="modal">
        <div class="stories-slider__modal-box">
            <div class="stories-slider__modal-content">
                @foreach ($block->stories as $story)
                    <div class="stories-slider__modal-story" data-story="{{ $story->id }}">
                        @if ($story->image)
                            <div class="stories-slider__modal-img">
                                <div>
                                    <picture>
                                        <source media="(min-width: 768px)" srcset="{{ getMediaUrl($story->image->filename, '1000x1200') }}.webp" type="image/webp">
                                        <source media="(min-width: 768px)" srcset="{{ getMediaUrl($story->image->filename, '1000x1200') }}">
                                        <source srcset="{{ getMediaUrl($story->image->filename, '500x600') }}.webp" type="image/webp">
                                        <img src="{{ getMediaUrl($story->image->filename, '500x600') }}" alt="{{ htmlentities($story->title) }}">
                                    </picture>
                                </div>
                            </div>
                        @endif
                        <div class="stories-slider__modal-header">
                            <h2>@title($story->title)</h2>
                            <p>@title($story->subtitle)</p>
                        </div>
                        <div class="stories-slider__story-items">
                            @foreach ($story->storyItems as $item)
                                <div class="stories-slider__story-item">
                                    <div class="stories-slider__story-item-number">
                                        <span>{{ $loop->iteration }}</span>
                                    </div>
                                    <div class="stories-slider__story-item-content">
                                        <h4>@title($item->title)</h4>
                                        {!! $item->content !!}
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
                <div class="stories-slider__modal-control">
                    <button class="std-button blue-button" data-action="next">Read the next story</button>
                </div>
            </div>
            <button class="stories-slider__modal-close modal-close" data-action="close-detail"></button>
        </div>
    </div>
</div>
