@extends('site.layouts.app')
@section('content')
    <!-- PAGE HERO -->
    <section class="page-hero">
        <div class="page-hero-bg">
            <img src="{{ asset('site/images/page-hider.png') }}" alt="مرضانا بعد العمليات">
        </div>
        <div class="breadcrumb">
            <a href="{{ route('site.home') }}">الرئيسية</a>
            <span class="separator">←</span>
            <span>مرضانا بعد العمليات</span>
        </div>
    </section>

    <!-- REVIEWS GALLERY SECTION -->
    <section class="section">
        <div class="container">
            <div class="section-title-wrapper">
                <h2 class="section-title">مرضانا بعد العمليات</h2>
            </div>

            <div class="reviews-gallery">
                @forelse($operations as $operation)
                    <div class="review-card">
                        <div class="review-image-placeholder">
                            <iframe width="560" height="315" src="{{ $operation->embed_url }}" title="{{ $operation->title }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>
                @empty
                    <p class="text-center" style="color: var(--text-secondary);">لا توجد عمليات حتى الآن.</p>
                @endforelse
            </div>
        </div>
    </section>
@endsection