<div class="timeline block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/timeline" data-aos="fade-up" data-aos-delay="500" data-aos-once="true">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="timeline__container-image timeline--mobile">
        @foreach($block->blockTimelineItems as $i => $item)
            <div class="timeline__image" data-role="slide-mobile" data-id="{{ $i ?? "" }}">
                <picture>
                    <source srcset="{{ getMediaUrl($item->mediaItem->filename, '800x500') }}.webp" type="image/webp">
                    {!! getMediaImg($item->mediaItem, '800x500', htmlentities($item->title)) !!}
                </picture>
            </div>
        @endforeach
        <div class="timeline__image-overlay"></div>
        <a href="#" class="timeline__play-button timeline__play-button-mobile" data-action="play"></a>
    </div>

    <div class="timeline__box">
        <div class="timeline__wrapper">
            <div class="timeline__container timeline--mobile">
                <h3 class="timeline__title">@title($block->block_title)</h3>

                <div class="timeline__navigation-mobile" data-role="nav-mobile">
                    <div class="timeline__prev" data-action="prev-mobile">
                        @include('frontend.svg.icon-arrow-white-down')
                    </div>
                    <div class="timeline__next" data-action="next-mobile">
                        @include('frontend.svg.icon-arrow-white-down')
                    </div>
                </div>
            </div>

            <div>
                @include('frontend.templates.components.timeline-nav-mobile', ['items' => $block->blockTimelineItems])
            </div>

            <div class="timeline__container">
                <div class="timeline__content" data-role="slider">
                    @foreach($block->blockTimelineItems as $i => $item)
                        <div
                            class="timeline__item"
                            data-role="slide"
                            data-id="{{ $i ?? "" }}"
                            data-video="{{ ($item->video && $item->video_embed) ? base64_encode($item->video_embed) : '' }}"
                        >
                            <div class="timeline__left animate animate__fadeInLeft">
                                <picture>
                                    <source srcset="{{ getMediaUrl($item->mediaItem->filename, '800x500') }}.webp" type="image/webp">
                                    {!! getMediaImg($item->mediaItem, '800x500', htmlentities($item->title)) !!}
                                </picture>
                            </div>
                            <div class="timeline__right animate animate__fadeInRight">
                                <div class="timeline__text">
                                    <h3 data-role="timeline-title" class="timeline__title timeline--desktop">{{ $block->block_title }}</h3>
                                    <span data-role="title-position"></span>
                                    <h2>{{ $item->title }}</h2>
                                    {!! $item->content !!}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <a href="#" class="timeline__play-button" data-action="play"></a>
            </div>
            <div>
                @include('frontend.templates.components.timeline-nav', ['items' => $block->blockTimelineItems])
            </div>
        </div>
    </div>
</div>
