@extends('welcome')

@section('seo_title', $article->title . ' | ')

@section('content')
<div class="min-h-screen">

    <div class="pt-20 w-full py-4 bg-white shadow-sm">
        <div class="max-w-3xl px-2 mx-auto text-slate-600 lg:text-lg flex items-center justify-center">
            <a href="{{route('blog')}}" class="hover:underline">{{__('Blog')}}</a>&nbsp;>
                                    {{substr($article->title,0,74)}}
                        @if(strlen($article->title) > 74)
                        ...
                        @endif

        </div>
    </div>


    <div class="mt-10 mx-auto max-w-7xl w-full rounded-lg text-slate-600 px-2 md:flex">
        <div class="max-w-4xl md:mr-4">
            <div class="p-2 md:p-2.5 rounded-lg shadow-sm bg-white static-page-content">

                <div class="w-full mb-2">
                    <img src="{{$article->imageUrl}}" class="w-full rounded-lg" alt="image: {{$article->title}}"/>
                </div>

                <h1 class="text-2xl font-semibold mt-3 mb-1">{{$article->title}}</h1>

                <div class="flex items-center mb-2 text-slate-500">
                    <x-entypo-calendar class="w-4 h-4 flex-shrink-0 mr-1" />
                    {{$article->created_at->format('d-M-Y')}}
                </div>

                <div class="text-lg">
                    {!! nl2br($article->content) !!}
                </div>

                <div class="flex justify-center items-center mt-3 pb-5">

                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ $article->slug }}" class="rounded bg-blue-900 text-white py-1.5 px-4 text-sm font-semibold flex items-center hover:bg-blue-800 mr-2" target="_blank">
                        <svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M9.19795 21.5H13.198V13.4901H16.8021L17.198 9.50977H13.198V7.5C13.198 6.94772 13.6457 6.5 14.198 6.5H17.198V2.5H14.198C11.4365 2.5 9.19795 4.73858 9.19795 7.5V9.50977H7.19795L6.80206 13.4901H9.19795V21.5Z" fill="currentColor"></path>
                        </svg>
                        {{ __('Share') }}
                    </a>

                    <a href="https://twitter.com/intent/tweet?text={{$article->title}} - {{ $article->slug }}" class="rounded bg-slate-950 text-white py-1.5 px-4 text-sm font-semibold flex items-center hover:bg-slate-800" target="_blank">
                        <svg class="h-3 mr-1" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="currentColor"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg>
                        {{ __('Tweet') }}
                    </a>

                    <a href="javascript:void(0);" class="ml-2 rounded bg-slate-800 text-white py-1.5 px-4 text-sm font-semibold flex items-center hover:bg-slate-950" target="_blank" onclick="(function(){ window.print(); })()">
                        <svg class="h-4" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4H16V6H8V4ZM18 6H22V18H18V22H6V18H2V6H6V2H18V6ZM20 16H18V14H6V16H4V8H20V16ZM8 16H16V20H8V16ZM8 10H6V12H8V10Z" fill="currentColor"></path>
                        </svg>
                        {{ __('Print') }}
                    </a>

                </div>
            </div>
        </div>

        <div class="p-3 w-full">
            <h2 class="text-2xl font-bold mb-5"><span class="border-b-4 border-b-blue-800 pb-0.5">{{__("Other")}}</span> {{__("from our blog")}}</h2>

            @foreach($otherArticles as $oa)
            <div class="p-3 rounded-lg bg-blue-50 flex mt-3">
                <div class="w-20 flex-shrink-0 mr-2">
                    <a href="{{$oa->slug}}">
                        <img src="{{$oa->imageUrl}}" alt="" class="w-20 h-20 rounded-lg" />
                    </a>
                </div>
                <div>
                    <a href="{{$oa->slug}}" class="text-lg font-semibold text-gray-900 hover:text-slate-800 block tracking-tight">
                        {{substr($oa->title,0,74)}}
                        @if(strlen($oa->title) > 74)
                        ...
                        @endif
                    </a>

                    <p class="text-blue-600 block">{{$oa->created_at->format('d-M-Y')}}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>

</div>
@endsection

@push('extraCSS')
<meta property="og:title" content="{{$article->title}}">
<meta property="og:description" content="{{substr($article->content, 0, 200)}}">
<meta property="og:image" content="{{$article->imageUrl}}">
<meta property="og:image:secure_url" content="{{$article->imageUrl}}">
<meta property="og:type" content="article">
<style>
    .static-page-content ul {
        list-style-type: disc;
        padding-left: 20px;
    }

    .static-page-content ol {
        list-style-type: decimal;
        padding-left: 20px;
    }
</style>
@endpush