@extends('website.layout.main')

@section('content')
    <!--Page Header Start-->
    <x-website-page-header title="Partners" bgImage="assets/images/backgrounds/page-header-bg.png" homeLink="{{ url('/') }}" />
    <!--Page Header End-->

    <!--Partners Page Start -->
    <section class="country-one">
        <div class="container">
            <div class="country-one__top-title-box sec-title-animation animation-style1">
                <h1 class="country-one__top-title title-animation">Our <span>Partners</span></h1>
            </div>
            <div class="row">
                @forelse ($partners as $partner)
                <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="100ms">
                    <div class="country-one__single">
                        <div class="country-one__img" style="overflow: hidden; height: 150px; display: flex; align-items: center; justify-content: center;">
                            <img src="@if ($partner->photo ==null) {{ asset('assets/images/null.png')}} @else {{ Storage::url($partner->photo) }}@endif" alt="{{ $partner->name }}" style="width: 100%; height: 100%; object-fit: contain;">
                        </div>
                        <h4 class="country-one__title"><a href="#">{{$partner->name}}</a></h4>
                    </div>
                </div>
                @empty
                <div class="col-12">
                    <p class="text-center">No partners available at the moment.</p>
                </div>
                @endforelse
            </div>
        </div>
    </section>
    <!--Partners Page End -->
@endsection