<div x-data="{
        showFullscreen: false,
        async toggleFullscreen() {
            if (!this.showFullscreen) {
                this.showFullscreen = true;
                await this.$nextTick();
                const elem = this.$refs.fullscreenModal;
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                } else if (elem.webkitRequestFullscreen) {
                    elem.webkitRequestFullscreen();
                } else if (elem.msRequestFullscreen) {
                    elem.msRequestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                this.showFullscreen = false;
            }
        }
     }"
     @fullscreenchange.window="if (!document.fullscreenElement) { showFullscreen = false }"
     @webkitfullscreenchange.window="if (!document.webkitFullscreenElement) { showFullscreen = false }"
     @msfullscreenchange.window="if (!document.msFullscreenElement) { showFullscreen = false }">
    @if ($post != null && isset($post->slug))

        <div class="relative flex flex-col bg-theme-background my-9">
            <!-- Caption overlay calculation -->
            @php
                $bottomText = '';
                $isLink = false;
                $linkUrl = '';
                $mediaOwner = isset($post->media_owner) && !empty($post->media_owner) ? $post->media_owner : '';

                if (isset($post->author_id) && !empty($post->author_id)) {
                    $bottomText = $post->author;
                    $isLink = true;
                    $linkUrl = url('user/' . $post->author_id);
                } elseif (isset($post->media_caption) && !empty($post->media_caption)) {
                    $bottomText = $post->media_caption;
                } elseif (isset($post->content) && !empty($post->content)) {
                    $bottomText = strip_tags($post->content);
                }
            @endphp

            <div class="relative flex flex-col justify-center overflow-hidden bg-theme-background {{ !$media ? 'pt-32 pb-32' : '' }}">

                <!-- Photo - full width spanning entire screen -->
                @if ($media != null && method_exists($media, '__invoke'))
                    <div @click="toggleFullscreen()" class="cursor-pointer">
                        {{ $media('hero', ['class' => 'w-full h-auto']) }}
                    </div>

                    <!-- Caption overlaid on image - positioned like author in article card -->
                    @if (!empty($bottomText) || !empty($mediaOwner))
                        <div class="absolute bottom-0 w-full">
                            <div class="w-full mx-auto max-w-7xl px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-28">
                                <div class="flex flex-col items-end gap-1">
                                    @if (!empty($bottomText))
                                        <h4 class="inline-flex items-center gap-2 rounded-sm bg-theme-brand px-2 pb-1 pt-0.5 text-sm lg:text-lg font-normal text-white">
                                            @if ($isLink && isset($post->author_profile_photo_path) && $post->author_profile_photo_path)
                                                <a href="{{ $linkUrl }}" @click.stop class="flex-shrink-0">
                                                    <img src="{{ Storage::url($post->author_profile_photo_path) }}"
                                                         alt="{{ $bottomText }}"
                                                         class="w-4 h-4 lg:w-5 lg:h-5 rounded-full profile-photo object-cover">
                                                </a>
                                            @endif
                                            @if ($isLink)
                                                <a href="{{ $linkUrl }}" @click.stop class="text-white hover:underline">
                                                    {{ $bottomText }}
                                                </a>
                                            @else
                                                {{ $bottomText }}
                                            @endif
                                        </h4>
                                    @endif
                                    @if (!empty($mediaOwner))
                                        <h6 class="inline-block items-center rounded-sm bg-theme-brand mt-2 px-1.5 pb-0.5 pt-0.5 text-[10px] lg:text-xs font-normal text-white">
                                            {{ $mediaOwner }}
                                        </h6>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Excerpt text centered - big like article title (only if no media) -->
                @elseif (isset($post->excerpt) && !empty($post->excerpt))
                    <div class="flex items-center justify-center px-6 md:px-10 lg:px-14">
                        <h2 class="text-3xl lg:text-5xl font-semibold leading-tight text-center text-theme-text-background bg-theme-brand p-6 m-8">
                            {{ $post->excerpt }}
                        </h2>
                    </div>
                @endif
            </div>
        </div>

        <!-- Full-screen modal -->
        <div x-show="showFullscreen"
             x-ref="fullscreenModal"
             @click="toggleFullscreen()"
             class="fixed inset-0 z-50 flex items-center justify-center bg-black"
             style="display: none;">

            @if ($media != null && method_exists($media, '__invoke'))
                <div class="relative w-full h-full flex items-center justify-center p-4">
                    <!-- Full-screen image - use first (largest) responsive image -->
                    @php
                        // Get the largest responsive image URL (first in array = largest)
                        $responsiveImages = $media->getResponsiveImageUrls('hero');
                        $largestImageUrl = !empty($responsiveImages) ? reset($responsiveImages) : $media->getUrl('hero');
                    @endphp
                    <img src="{{ $largestImageUrl }}"
                         alt="{{ $post->title ?? '' }}"
                         class="max-w-full max-h-full object-contain"
                         loading="eager">
                </div>
            @endif
        </div>

    @endif
</div>
