@php
    $data = $block->getMixedMedia();
    $spacingType = $block->color_scheme ? 'block-padding' : 'block-margin';
@endphp

@if (!empty($data))
    <div class="mixed-media-v3 {{ $spacingType }}-top--{{ $block->margin_type_top }} {{ $spacingType }}-bottom--{{ $block->margin_type_bottom }} {{ $block->invert ? 'mixed-media-v3--invert' : '' }} block-bg--{{ $block->color_scheme ?: 'white' }}" data-controller="blocks/mixed-media-v3">
        @if ($block->anchor_id)
            <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
        @endif
        <div class="mixed-media-v3__wrapper">
            <div class="mixed-media-v3__container">
                <div class="mixed-media-v3__media-container"
                    @if ($block->video && $block->video_embed)
                        data-video="{{ base64_encode($block->video_embed) }}"
                        data-action="play"
                    @endif
                >
                    @if ($block->video_embed || $block->video)
                        <div class="mixed-media-v3__media-video">
                            {!! $block->video_embed ?: '<iframe src="' . str_replace('http://', 'https://', $block->video) . '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>' !!}
                        </div>
                        @if ($block->image1)
                            <span class="mixed-media-v3__play-button" aria-label="Play video"></span>
                        @endif
                    @elseif ($data->image)
                        <picture class="mixed-media-v3__image">
                            @if ($data->image->extension == 'gif')
                                {!! getMediaImg($data->image, null, htmlentities($data->title)) !!}
                            @else
                                <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1Mobile->filename ?? $data->image->filename, '880x642') }}.webp" type="image/webp">
                                <source media="(max-width: 768px)" srcset="{{ getMediaUrl($block->image1Mobile->filename ?? $data->image->filename, '880x642') }}">
                                <source srcset="{{ getMediaUrl($data->image->filename, '880x642') }}.webp" type="image/webp">
                                {!! getMediaImg($data->image, '880x642', htmlentities($data->title)) !!}
                            @endif
                        </picture>
                    @endif
                </div>
                <div class="mixed-media-v3__info">
                    @if ($data->subject)
                        <div class="mixed-media-v3__subject">
                            @title($data->subject)
                        </div>
                    @endif
                    @include('frontend.components.heading-title', [
                        'title' => $data->title, 'heading_type' => $block->heading_type, 'class' => 'mixed-media-v3__title'
                    ])
                    @if ($data->excerpt)
                        <div class="mixed-media-v3__content rich-content-system">{!! $data->excerpt !!}</div>
                    @endif
                    @if (!empty($data->cta))
                        <div class="mixed-media-v3__cta">{!! generateLink($data->cta, 'std-button std-button--large') !!}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endif