@extends('front.layout.app')
@section('title', 'Blogs')
@section('content')

    <section class="pagetitle">
        <div class="container">
            <div class="pagetitle__content">
                <h2>Blogs</h2>
            </div>
        </div>
    </section>

    <section class="blog">
        <div class="container">
            <div class="row">
                @forelse ($blogs as $blog)
                    <div class="col-md-4">
                        <div class="blog-card">
                            <figure class="blog-card__img">
                                <img src="{{ $blog->blogImage('blog_image') ?? '' }}" alt="image" class="img-fluid">
                                <div class="date">
                                    {{ $blog->created_at->format('d') }}
                                    <span>{{ $blog->created_at->format('M') }}</span>
                                </div>
                            </figure>
                            <div class="blog-card__content">
                                {{-- <a class="category">Uncategorized</a> --}}
                                <a href="" class="title">{{ $blog->heading ?? '' }}</a>
                                <ul>
                                    <li><a href="">By <i class="fas fa-user-circle"></i>
                                            {{ $blog->create_by ?? '' }}</a></li>
                                    {{-- <li><a href=""><i class="far fa-comment-alt"></i></a></li> --}}
                                    {{-- <li class="socialIcons">
                                <a href=""><i class="fas fa-share-alt"></i></a>
                                <ul>
                                    <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-pinterest"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-linkedin-in"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-telegram"></i></a></li>
                                </ul>
                            </li> --}}
                                </ul>
                                <p>
                                    {{ \Illuminate\Support\Str::words($blog->description ?? '', 25, '...') }}
                                </p>
                                <a href="{{ route('front.blog.detail', ['slug' => $blog->slug]) }}" class="moreBtn">Continue
                                    reading</a>
                            </div>
                        </div>
                    </div>
                @empty
                    <p>no data found</p>
                @endforelse
                {{-- <div class="col-md-4">
                <div class="blog-card">
                    <figure class="blog-card__img">
                        <img src="{{ asset('front/assets/images/blog2.jpg') }}" alt="image" class="img-fluid">
                        <div class="date">27 <span>Aug</span></div>
                    </figure>
                    <div class="blog-card__content">
                        <a class="category">Uncategorized</a>
                        <a href="" class="title">Blogs</a>
                        <ul>
                            <li><a href="">By <i class="fas fa-user-circle"></i> Admin</a></li>
                            <li><a href=""><i class="far fa-comment-alt"></i></a></li>
                            <li class="socialIcons">
                                <a href=""><i class="fas fa-share-alt"></i></a>
                                <ul>
                                    <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-pinterest"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-linkedin-in"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-telegram"></i></a></li>
                                </ul>
                            </li>
                        </ul>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...
                        </p>
                        <a href="" class="moreBtn">Continue reading</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-card">
                    <figure class="blog-card__img">
                        <img src="{{ asset('front/assets/images/blog3.jpg') }}" alt="image" class="img-fluid">
                        <div class="date">27 <span>Aug</span></div>
                    </figure>
                    <div class="blog-card__content">
                        <a class="category">Uncategorized</a>
                        <a href="" class="title">Blogs</a>
                        <ul>
                            <li><a href="">By <i class="fas fa-user-circle"></i> Admin</a></li>
                            <li><a href=""><i class="far fa-comment-alt"></i></a></li>
                            <li class="socialIcons">
                                <a href=""><i class="fas fa-share-alt"></i></a>
                                <ul>
                                    <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-pinterest"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-linkedin-in"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-telegram"></i></a></li>
                                </ul>
                            </li>
                        </ul>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...
                        </p>
                        <a href="" class="moreBtn">Continue reading</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-card">
                    <figure class="blog-card__img">
                        <img src="{{ asset('front/assets/images/blog1.jpg') }}" alt="image" class="img-fluid">
                        <div class="date">27 <span>Aug</span></div>
                    </figure>
                    <div class="blog-card__content">
                        <a class="category">Uncategorized</a>
                        <a href="" class="title">Blogs</a>
                        <ul>
                            <li><a href="">By <i class="fas fa-user-circle"></i> Admin</a></li>
                            <li><a href=""><i class="far fa-comment-alt"></i></a></li>
                            <li class="socialIcons">
                                <a href=""><i class="fas fa-share-alt"></i></a>
                                <ul>
                                    <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-pinterest"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-linkedin-in"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-telegram"></i></a></li>
                                </ul>
                            </li>
                        </ul>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...
                        </p>
                        <a href="" class="moreBtn">Continue reading</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-card">
                    <figure class="blog-card__img">
                        <img src="{{ asset('front/assets/images/blog2.jpg') }}" alt="image" class="img-fluid">
                        <div class="date">27 <span>Aug</span></div>
                    </figure>
                    <div class="blog-card__content">
                        <a class="category">Uncategorized</a>
                        <a href="" class="title">Blogs</a>
                        <ul>
                            <li><a href="">By <i class="fas fa-user-circle"></i> Admin</a></li>
                            <li><a href=""><i class="far fa-comment-alt"></i></a></li>
                            <li class="socialIcons">
                                <a href=""><i class="fas fa-share-alt"></i></a>
                                <ul>
                                    <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-pinterest"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-linkedin-in"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-telegram"></i></a></li>
                                </ul>
                            </li>
                        </ul>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...
                        </p>
                        <a href="" class="moreBtn">Continue reading</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-card">
                    <figure class="blog-card__img">
                        <img src="{{ asset('front/assets/images/blog3.jpg') }}" alt="image" class="img-fluid">
                        <div class="date">27 <span>Aug</span></div>
                    </figure>
                    <div class="blog-card__content">
                        <a class="category">Uncategorized</a>
                        <a href="" class="title">Blogs</a>
                        <ul>
                            <li><a href="">By <i class="fas fa-user-circle"></i> Admin</a></li>
                            <li><a href=""><i class="far fa-comment-alt"></i></a></li>
                            <li class="socialIcons">
                                <a href=""><i class="fas fa-share-alt"></i></a>
                                <ul>
                                    <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-pinterest"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-linkedin-in"></i></a></li>
                                    <li><a href=""><i class="fa-brands fa-telegram"></i></a></li>
                                </ul>
                            </li>
                        </ul>
                        <p>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...
                        </p>
                        <a href="" class="moreBtn">Continue reading</a>
                    </div>
                </div>
            </div> --}}
            </div>
        </div>
    </section>

@endsection