{{-- Details popup content for a before/after case. --}}
<div class="row g-6 mb-7">
    <div class="col-md-5">
        <div class="rounded border" style="height: 200px; background: url('{{ $case->main_image_url ?? asset('assets/media/svg/files/blank-image.svg') }}') center / cover no-repeat;"></div>
    </div>
    <div class="col-md-7">
        @foreach (['ar' => 'rtl', 'en' => 'ltr'] as $locale => $dir)
            <div class="mb-5" dir="{{ $dir }}">
                <div class="badge badge-light mb-2">{{ strtoupper($locale) }}</div>
                <div class="fw-bold text-gray-800 fs-5">{{ $case->getTranslation('title', $locale, false) ?: '—' }}</div>
                @if ($case->getTranslation('details', $locale, false))
                    <div class="text-gray-600 fs-7 mt-1">{{ $case->getTranslation('details', $locale, false) }}</div>
                @endif
            </div>
        @endforeach
    </div>
</div>

<h4 class="fs-5 fw-bold mb-4">{{ trans('dash_site.gallery_images') }} <span class="badge badge-light-primary ms-1">{{ $case->images->count() }}</span></h4>
@if ($case->images->isEmpty())
    <div class="text-center text-muted py-8"><i class="bi bi-images fs-3x d-block mb-3"></i>{{ trans('dash_site.no_images') }}</div>
@else
    <div class="row g-4">
        @foreach ($case->images as $image)
            <div class="col-6 col-md-3">
                <a href="{{ $image->image_url }}" target="_blank" rel="noopener" class="d-block rounded overflow-hidden border">
                    <div style="height: 130px; background: url('{{ $image->thumb_url }}') center / cover no-repeat;"></div>
                </a>
            </div>
        @endforeach
    </div>
@endif