@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' => isset($page->meta_title) && $page->meta_title !== '' ? $page->meta_title : $page->title,
        'description' => $page->meta_description,
        'keywords' => $page->meta_keywords,
        'image' => $page->getFirstMediaUrlOrDefault(MediaHelper::PAGE_MEDIA_PATH, 'webp')['url'],
        'schema' => $page->schema
    ])
@endsection
@section('content')
    <section class="wpo-breadcumb-area" style="background-image: url({{$page->getFirstMediaUrlOrDefault(MediaHelper::PAGE_BANNER_MEDIA_PATH, 'webp')['url']}});background-repeat: no-repeat;background-size: cover;background-position: center">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="wpo-breadcumb-wrap">
                        <h1>{{ $page->title }}</h1>
                        <ul>
                            <li><a href="{{ route('home')}}">{{ __('general.home') }}</a></li>

                            <li><span> {{ $page->title }}</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <section class="wpo-about-section section-padding">
        <div class="container">
            <div class="wpo-about-section-wrapper">
                <div class="row align-items-center">
                    <div class="col-lg-5 col-md-12 col-12">
                        <div class="wpo-about-img">
                            <img src="{{$page->getFirstMediaUrlOrDefault(MediaHelper::PAGE_MEDIA_PATH, 'webp')['url']}}"
                                 alt="{{$page->getFirstMediaUrlOrDefault(MediaHelper::PAGE_MEDIA_PATH)['alt']}}"
                                 title="{{$page->getFirstMediaUrlOrDefault(MediaHelper::PAGE_MEDIA_PATH)['title']}}">
                        </div>
                    </div>

                    <div class="col-lg-7 col-md-12 col-12">
                        <div class="wpo-about-content">
                            <div class="about-title">
                                <span>{{ $page->title }}</span>
                                <h2>{{ $page->heading }}</h2>
                            </div>
                            <div class="wpo-about-content-inner">
                                <p>
                                    {!! $page->description !!}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-12">
                        <div class="wpo-about-content p-0 mt-5">
                            <div class="wpo-about-content-inner">
                                <p>
                                    {!! $page->second_description !!}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection