{{--
  Medios para tarjetas de blog en la portada: imagen destacada y/o embed TikTok (v2).
  Variables opcionales:
  - $mediaMinHeight (ej. '200px', '220px')
  - $imageClass (clases extra para la <img>)
--}}
@php
    $mediaMinHeight = $mediaMinHeight ?? '200px';
    $imageClass = trim('w-100 h-100 ' . ($imageClass ?? ''));
    $tiktokId = $post->getFirstTiktokEmbedVideoId();
    $hasHeader = filled($post->header);
    $imageUrl = $post->getHeaderPublicUrlOrDefault();
    $defaultMedia = $post->getHomepageCardDefaultNormalized();
    $showToggle = $tiktokId && $hasHeader;
    if (!$tiktokId) {
        $activePane = 'image';
    } elseif (!$hasHeader) {
        $activePane = 'video';
    } else {
        $activePane = $defaultMedia === 'video' ? 'video' : 'image';
    }
    $rootMinStyle = (! $tiktokId || $activePane === 'image')
        ? 'min-height: ' . e($mediaMinHeight) . ';'
        : '';
    $showingVideoClass = ($activePane === 'video') ? ' home-blog-card-media--showing-video' : '';
@endphp
<div class="home-blog-card-media p-relative rounded-top{{ $tiktokId ? ' home-blog-card-media--has-tiktok' : '' }}{{ $showingVideoClass }}"
     style="{{ $rootMinStyle }}"
     data-active-pane="{{ $activePane }}">
    @if($tiktokId)
        <div class="home-blog-card-pane home-blog-card-pane-video w-100 {{ $activePane === 'video' ? '' : 'd-none' }}"
             data-pane="video">
            <div class="home-blog-card-embed-ratio mx-auto d-flex align-items-center justify-content-center bg-dark">
                <iframe class="home-blog-card-embed-iframe border-0 d-block rounded-0"
                        src="https://www.tiktok.com/embed/v2/{{ $tiktokId }}"
                        title="TikTok"
                        loading="lazy"
                        allow="encrypted-media; fullscreen"
                        allowfullscreen
                        sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-top-navigation allow-same-origin"
                        referrerpolicy="strict-origin-when-cross-origin"></iframe>
            </div>
        </div>
    @endif

    @if(! ($tiktokId && ! $hasHeader))
        <div class="home-blog-card-pane home-blog-card-pane-image w-100 h-100 {{ ($tiktokId && $activePane === 'video') ? 'd-none' : '' }}"
             data-pane="image"
             style="min-height: {{ $mediaMinHeight }};">
            <img src="{{ $imageUrl }}"
                 alt="{{ $post->title }}"
                 class="{{ $imageClass }}"
                 style="object-fit: cover; min-height: {{ $mediaMinHeight }};"
                 loading="lazy">
        </div>
    @endif

    @if($showToggle)
        <div class="home-blog-card-switch btn-group btn-group-sm p-absolute box-shadow-7"
             style="bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 5;"
             role="group"
             aria-label="{{ __('Medio en portada') }}">
            <button type="button"
                    class="btn btn-light btn-sm px-2 py-1 text-1 {{ $activePane === 'image' ? 'active' : '' }}"
                    data-home-blog-show="image">{{ __('Imagen') }}</button>
            <button type="button"
                    class="btn btn-light btn-sm px-2 py-1 text-1 {{ $activePane === 'video' ? 'active' : '' }}"
                    data-home-blog-show="video">{{ __('Video') }}</button>
        </div>
    @endif
</div>

@once
<style>
    /* Vídeo vertical TikTok (9:16): la tarjeta crece con el alto natural del embed */
    .home-blog-card-media--has-tiktok.home-blog-card-media--showing-video {
        min-height: 0 !important;
        overflow: visible;
    }
    .home-blog-card-media .home-blog-card-embed-ratio {
        width: min(100%, 325px);
        max-width: 100%;
        aspect-ratio: 9 / 16;
        max-height: 85vh;
    }
    .home-blog-card-media .home-blog-card-embed-iframe {
        width: 100%;
        height: 100%;
        display: block;
    }
    .home-blog-card-media--has-tiktok:not(.home-blog-card-media--showing-video) {
        overflow: hidden;
    }
    .home-blog-card-switch .btn.active {
        font-weight: 600;
    }
</style>
<script>
    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.home-blog-card-switch [data-home-blog-show]');
        if (!btn) return;
        e.preventDefault();
        var mode = btn.getAttribute('data-home-blog-show');
        var root = btn.closest('.home-blog-card-media');
        if (!root) return;
        root.querySelectorAll('.home-blog-card-pane').forEach(function (pane) {
            var p = pane.getAttribute('data-pane');
            pane.classList.toggle('d-none', p !== mode);
        });
        root.querySelectorAll('.home-blog-card-switch .btn').forEach(function (b) {
            b.classList.toggle('active', b.getAttribute('data-home-blog-show') === mode);
        });
        root.setAttribute('data-active-pane', mode);
        root.classList.toggle('home-blog-card-media--showing-video', mode === 'video');
    });
</script>
@endonce