@php
    $spacingType = $block->color_scheme ? 'block-padding' : 'block-margin';
@endphp
<div class="mixed-media-v2 {{ $spacingType }}-top--{{ $block->margin_type_top }} {{ $spacingType }}-bottom--{{$block->margin_type_bottom}} {{ $block->invert ? 'mixed-media-v2--invert' : '' }} block-bg--{{ $block->color_scheme }}" data-controller="blocks/mixed-media-v2">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="mixed-media-v2__wrapper">
        <div class="mixed-media-v2__container">
            <div
                class="mixed-media-v2__media-container"
                @if ($block->video && $block->video_embed)
                    data-video="{{ base64_encode($block->video_embed) }}"
                    @if($block->image1)
                        data-action="play"
                    @endif
                @endif
            >
                @if($block->video_embed || $block->video)
                    <div class="mixed-media-v2__media-video">
                        @if($block->video_embed)
                            {!! $block->video_embed !!}
                        @else
                            <iframe src="{{ str_replace('http://', 'https://', $block->video) }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        @endif
                    </div>
                    @if($block->image1)
                        <span class="mixed-media-v2__play-button"></span>
                    @endif
                @endif

                @if($block->image1)
                    <picture class="mixed-media-v2__image">
                        @if ($block->image1->extension == 'gif')
                            {!! getMediaImg($block->image1, null, htmlentities($block->block_title)) !!}
                        @else
                            @if($block->image1Mobile)
                                <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1Mobile->filename, '1145x700') }}.webp" type="image/webp">
                                <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1Mobile->filename, '1145x700') }}">
                            @else
                                <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1->filename, '1145x700') }}.webp" type="image/webp">
                                <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1->filename, '1145x700') }}">
                            @endif
                            <source srcset="{{ getMediaUrl($block->image1->filename, '1145x700') }}.webp" type="image/webp">
                            {!! getMediaImg($block->image1, '1145x700', htmlentities($block->block_title)) !!}
                        @endif
                    </picture>
                @endif
            </div>
            <div class="mixed-media-v2__info">
                @if($block->block_title)
                    <h2 class="mixed-media-v2__title">
                        @title($block->block_title)
                    </h2>
                @endif
                @if($block->content)
                    <div class="mixed-media-v2__content rich-content-system">
                        {!! $block->content !!}
                    </div>
                @endif
                @if (!empty($block->cta1))
                    <div class="mixed-media-v2__cta">{!! generateLink($block->cta1, 'std-button std-button--large') !!}</div>
                @endif
            </div>
        </div>
    </div>
</div>