@extends('layouts.website', ['hideBanner' => true])

@if(!empty($post->seo))
    @section('page_title', $post->seo->title)
    @section('metaDescription', $post->seo->description)
    @section('keywords', $post->seo->keywords)
@endif

@section('content')
    <section class="single-post">
    	<div class="container">
                        <div class="post-nav {{  $nav_flex_class }}">
                @if($prevPost)
                    <a class="prev-art-nav" href="/article/{{ $prevPost->id .'-'. str_slug($prevPost->title) }}">Previous</a>
                @endif
                <div>
                    @if($nextPost)
                        <a class="next-art-nav" href="/article/{{ $nextPost->id .'-'. str_slug($nextPost->title) }}">Next</a>
                    @endif
                    <a href="/media-hub" class="close-article">
                        <!-- &times; -->
                        <img src="/images/times.svg" alt="">
                    </a>   
                </div>
                
            </div>

            @if($post->template == 1)
                @if(!is_null($post->vue_blob))
                    <div class="post-featured-img">
                        <img src="{{ $post->vue_blob }}" alt="{{ $post->title }}">
                    </div>
                @endif
            @endif
            
            <h1>{{ $post->title }}</h1>
    		<div class="post-date">{{ $post->display_date }}</div>
            
            <div class="entry-content">
                <!--  {!! preg_replace("/<([a-z][a-z0-9]*)[^>]*?(\/?)>/si",'<$1$2>', $post->body) !!}   -->
                {{-- strip_tags($post->body,"<a><p><h1><h2><h3>"); --}}
                {!! strip_tags($post->body, ['a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5','strong', 'br', 'div', 'iframe', 'img', 'ul', 'ol', 'li']) !!}
                
                @if($post->template == 2)
                    @if(!empty($post->gallery))
                        <div class="post-gallery-wrapper">
                            <div id="lightgallery">
                                @foreach($post->gallery as $image)
                                    <a href='{{ asset("$image->image") }}' class="light-gllry-img" data-sub-html=".caption">
                                        <div class="gallery-bg" style='background-image: url({{ asset("$image->image") }})'></div>
                                        <img src='{{ asset("$image->image") }}' class="w-100 shadow-1-strong mb-4" alt="{{ $image->caption ?? '' }}" />
                                        <div class="caption">{!! $image->caption ?? '' !!}</div>
                                        @if(!is_null($image->caption))
                                            <h4>{!! $image->caption ?? '' !!}</h4>
                                        @endif 
                                    </a>
                                                                      
                                @endforeach                              
                            </div>
                        </div>                        
                    @endif
                @endif

                @if($post->template == 3)
                    @if(!empty($post->gallery))
                        <div class="post-gallery-wrapper">
                            <div class="static-post-gal">
                                @foreach($post->gallery as $image)
                                    <div class="static-gallery-img" style='background-image: url({{ asset("$image->image") }})' >
                                        <img src='{{ asset("$image->image") }}' class="w-100 shadow-1-strong mb-4" alt="{{ $image->caption ?? '' }}" />
                                    </div>
                                @endforeach                              
                            </div>
                        </div>                        
                    @endif
                @endif
            </div>
    	</div>
    </section>
    
@endsection