@extends('layouts.app')

@section('title','Our Blog')

@section('meta')
<meta name="description" content="View our blog posts on a variety of topics. From the latest Reef news, tips and tricks when hybrid working and much more!">
<meta property="og:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">

<meta property="twitter:image" content="{{asset('images/reef-rocks-ltd.jpg')}}">

<meta property="og:image:width" content="600"/>
<meta property="og:image:height" content="315"/>
@endsection

@section('header')
	@include('front.partials.header')
@endsection

@section('content')
<div class="page-wrapper">
<section class="standard-block py-4 py-md-5">
    <div class="container">

        <h1 class="h2 mb-3 mb-md-4 text-uppercase f-35">Latest blogs</h1>

        <div class="row g-5">
            @foreach ($blog_posts as $blogPost)

                <div class="col-12 col-md-6 col-lg-4">
                    <div class="blog-single">
                        <div class="image-wrapper mb-4">
                            <div class="image" style="background-image: url('{{ route('file_storage_serve', ['params' => 'blog', 'file' => $blogPost->image]) }}');">
                                <img src="{{ route('file_storage_serve', ['params' => 'blog', 'file' => $blogPost->image]) }}" alt="{{$blogPost->image_alt}}" class="d-none">
                            </div>
                        </div>
                        <p class="h2 mb-0 f-22">
                            <a href="{{route('blog_inner_page', ['url_title' => $blogPost->url_title])}}" class="h3 f-22">{!!$blogPost->title!!}</a>
                        </p>
                        <div class="bottom d-flex align-items-center justify-content-between">
                            <div>Posted by <u>{{$blogPost->published_by}}</u> on  {{\Carbon\Carbon::parse($blogPost->published_date)->format(' d M Y')}}</div>
                        </div>
                        <a href="{{route('blog_inner_page', ['url_title' => $blogPost->url_title])}}" class="stretched-link"><span class="visually-hidden">Open Link</span></a>
                    </div>
                </div>
            @endforeach
            <div class="col-12 d-flex justify-content-center pagination pagination-lg">{!! $blog_posts->links() !!}</div>
        </div>
    </div>
</section>

{{-- hubspot posts --}}

{{-- <section class="standard-block py-4 py-md-5">
    <div class="container">
        <h1 class="h2 mb-3 mb-md-4 text-uppercase f-35">Latest blogs</h1>

        <div class="row g-5">
            @foreach ($blog_posts as $blogPost)

                <div class="col-12 col-md-6 col-lg-4">
                    <div class="blog-single">
                        <div class="image-wrapper mb-4">
                            <div class="image" style="background-image: url('{{ $blogPost->featuredImage }}');">
                                <img src="{{ $blogPost->featuredImage }}" alt="#" class="d-none">
                            </div>
                        </div>
                        <p class="h2 mb-0 f-22">
                            <a href="{{ $blogPost->url_title }}" class="h3 f-22">{!!$blogPost->title!!}</a>
                        </p>
                        <div class="bottom d-flex align-items-center justify-content-between">
                          <div>Posted by <u>{{$blogPost->published_by}}</u> on  {{\Carbon\Carbon::parse($blogPost->published_date)->format(' d M Y')}}</div> 
                        </div>
                        <a href="{{ $blogPost->url_title }}" class="stretched-link"><span class="visually-hidden">Open Link</span></a>
                    </div>
                </div>
            @endforeach
            <div class="col-12 d-flex justify-content-center pagination">{!! $blog_posts->links() !!}</div>
        </div>
    </div>
</section> --}}

{{-- end of hubspot posts --}}

@include('front.partials.free_trial_black_bar')

@endsection


@section('footer')
    @include('front.partials.footer')
</div>
@endsection