@extends('themes.'.config('smartekcms.themes.frontend').'.app', [
    'title' => trans('front.references.our_references'),
    'meta_description' => trans('front.references.meta_description', ['appName' => $general_settings->website_title]),
    'cover_image' => $coverImage,
    'model_type' => 'reference',
])

@section('head')
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "{{ trans('front.general.home') }}",
        "item": "{{ route('home') }}"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "{{ trans('front.references.our_references') }}",
        "item": "{{ route('references', ['references' => trans('route.frontend.references') ]) }}"
      }]
    }
    </script>
@endsection

@section('content')

    <!-- ====== Banner Start ====== -->
    <section class="st-page-banner banner-2">
        <!--v2 banner-->
        <div class="card">
            <div class="card-img-overlay" style="background-image: url('{{ $coverImage = $general_settings->getFirstMediaUrlTraitAttribute('reference', 'default') }}');"></div>
            <div class="container" style="z-index: 1;">
                <div class="st-banner-content">
                    <h1 class="text-center">{{ trans('front.references.our_references') }}</h1>
                </div>
                <ul class="st-breadcrumb">
                    <li><a href="{{ route('home') }}">{{ trans('front.general.home') }}</a></li>
                    <li class="active"><a href="{{ route('references', ['references' => trans('route.frontend.references') ]) }}">{{ trans('front.references.our_references') }}</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- ====== Banner End ====== -->

    <!--====== References grid-menu ONE PART STARTS ======-->
    <section class="st-gridmenu py-5">
        <div class="container">
            <div class="row filtr-container wow fadeInUp justify-content-sm-start justify-content-center" data-wow-delay=".15s">
                @foreach($references as $reference)
                <div class="filtr-item col-md-4 col-sm-6 col-10">
                    <div class="grid-content card h-100" style="border: unset; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);">
                        <div class="grid-image ratio ratio-16x9">
                            <div class="card-img-overlay d-flex align-items-center justify-content-center h-100 w-100 portfolio-content">
                                <div class="grid-icon d-inline-block position-relative">
                                    <a class="stretched-link" href="{{ $reference->url ?? '#' }}">
                                        <i class="lni lni-link fw-bold"></i>
                                        <div class="gradient-mask-2"></div>
                                    </a>
                                </div>
                            </div>
                            @if($logoThumbImage = $reference->getFirstMediaUrlTraitAttribute('logo', 'thumb_512x288'))
                                <img class="card-img-top" style="object-fit: contain;" src="{{ $logoThumbImage }}" alt="{{ $reference->name }} Logo">
                            @endif
                        </div>
                        <div class="card-body d-grid w-100 align-items-end">
                            <a href="{{ $reference->url ?? '#' }}" target="_blank" class="stretched-link">
                                <h4 class="card-title st-card-title card-text st-befor position-relative">{{ $reference->name }}</h4>
                            </a>
                        </div>
                    </div> <!-- single portfolio -->
                </div>
                @endforeach
            </div> <!-- row -->
        </div> <!-- container -->
    </section>
    <!--====== References grid-menu ONE PART ENDS ======-->

@endsection

@section('js')
	@parent
@endsection