@extends('website.layout.master')
@section('content')
    <div class="container pt-5">
        <div class="row mt-5">
            @forelse ($blogs as $blog)
                <div class="news col-md-6 col-lg-4 d-flex flex-column">
                    <a href="{{ route('website.blogsDetail', ['id' => $blog->id]) }}">
                        <img width="1120" height="747" src="{{ asset('/storage/' . $blog->image) }}"
                            class="img-fluid wp-post-image lazyloaded" alt="" loading="lazy"
                            sizes="(max-width: 1120px) 100vw, 1120px" srcset="{{ asset('/storage/' . $blog->image) }}"
                            data-ll-status="loaded">
                        <noscript>
                            <img width="1120" height="747" src="{{ asset('/storage/' . $blog->image) }}"
                                class="img-fluid wp-post-image" alt="" loading="lazy"
                                srcset="{{ asset('/storage/' . $blog->image) }}"
                                sizes="(max-width: 1120px) 100vw, 1120px" />
                        </noscript></a>

                    <h4 class="pb-2 mt-3"><a
                            href="{{ route('website.blogsDetail', ['id' => $blog->id]) }}"><b>{{ $blog->name }}</b></a></h4>
                    <p class="mb-0">{{ $blog->date }}</p>
                    <div class="blog">
                        {!! $blog->content !!}
                    </div>
                    <a class="read-more" href="{{ route('website.blogsDetail', ['id' => $blog->id]) }}"> read more</a>
                    {{-- <a href="{{ route('website.blogsDetail', ['id' => $blog->id]) }}"
                        class="btn rounded mt-3 btn-green  mt-auto ml-auto readme" role="button">Read
                        More</a> --}}
                </div>
            @empty
            @endforelse
        </div>
    </div>
    <br />
@endsection
@push('scripts')
    <script>
        (function() {
            window.addEventListener('load', function() {
                var characterCount = 500
                var blogParagraph = document.querySelectorAll('.blog')
                var trail = "..."
                // Shorten a string to less than maxLen characters without truncating words.
                function shorten(str, maxLen, separator = ' ') {
                    if (str.length <= maxLen) return str;
                    return str.substr(0, str.lastIndexOf(separator, maxLen));
                }
                blogParagraph.forEach(item => {
                    item.textContent = shorten(item.textContent, characterCount) + trail;
                })
            })
        })()
    </script>
@endpush