@extends('site.layouts.' . $pageTemplate)

@if ($page)
    <x-site.meta-component :model="$page" />
@endif

@section('contents')
    <header class="pages-header bg-img valign parallaxie" data-background="{{ asset('site/img/portfolio/project1/bg.jpg') }}"
        data-overlay-dark="5">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="cont text-center">
                        @if ($page)
                            <h1>{{ $page->title }}</h1>
                            <div class="path">
                                <a href="/" title="Home">Home</a><span>/</span><a
                                    href="/{{ $page->postCategory->slug ?? '' }}">{{ $page->postCategory->name ?? 'Category' }}</a><span>/</span><a
                                    class="active" title="{{ $page->title }}">{{ $page->title }}</a>
                            </div>
                        @else
                            <h1>Page Not Found !</h1>
                            <div class="path">
                                <a href="/" title="Home">Home</a><span>/</span><a class="active">Page Not Found
                                    !</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="container">
        <div class="row">
            <div class="col-12 py-4">
                @if ($page)
                    <h1
                        style="margin:0; padding:5px 0px; border-bottom:1px solid #ccc; margin-bottom:20px; font-size:24px!important">
                        {{ $page->title }}</h1>
                    @if ($page->featured_image)
                        <img src="{{ asset('uploads/posts/' . $page->featured_image) }}"
                            alt="{{ pathinfo($page->featured_image, PATHINFO_FILENAME) }}"
                            title="{{ pathinfo($page->featured_image, PATHINFO_FILENAME) }}"
                            style="width:250px; height:200px; float:left; margin:10px 20px 20px 20px">
                    @endif

                    <div style="text-align:justify">
                        {!! $page->contents ?? 'No Contents' !!}
                    </div>
                @else
                    <h4 class="text-center">Page Not Found !</h4>
                @endif
            </div>
        </div>
    </div>
@endsection