@extends("Layouts.layout")
@section("title")
Blog
@endsection
@section("contant")

<div class="no-bottom no-top" id="content">

    <div id="top"></div>

    <section id="subheader" class="bg-dark text-light relative jarallax">
        <img src="{{ asset('assets/images/background/7.webp') }}" class="jarallax-img" alt="">
        <div class="container relative z-2">
            <div class="row gy-4 gx-5 align-items-center">
                <div class="col-lg-12">
                    <div class="spacer-double sm-hide"></div>
                    <h5 class="wow fadeInUp">Alimentez votre avenir avec une énergie propre</h5>
                    <h1 class="mb-3 wow fadeInUp" data-wow-delay=".2s">Blog</h1>
                    <div class="border-bottom mb-3"></div>
                    <ul class="crumb wow fadeInUp">
                        <li><a href="/">Accueil</a></li>
                        <li class="active">Blog</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="gradient-edge-bottom h-50"></div>
        <div class="sw-overlay"></div>
    </section>

    <section>
        <div class="container">
            <div class="row g-4 gy-5">
                @foreach($blogs as $blog)
                <div class="col-lg-4 col-md-6 mb10">
                    <div class="hover">
                        <div class="post-image rounded-1 mb-2 overflow-hidden">
                            <div class="d-tagline z-2">
                                <span>{{ $blog->category }}</span>
                            </div>
                            <a href="{{ route('blog.show', $blog->id) }}">
                                @if($blog->image)
                                <img src="{{ asset('blogs/'.$blog->image) }}" class="hover-scale-1-1 blog-img">
                                @endif
                            </a>
                        </div>
                        <div class="pt-2 h-100">
                            <h4><a class="text-dark" href="{{ route('blog.show', $blog->id) }}">{{ $blog->title }}</a>
                            </h4>
                            <p class="mb-3">{{ $blog->description }}</p>
                            <div class="relative">
                                <div class="d-inline fs-14"><i class="icofont-ui-calendar id-color me-2"></i><span>{{
                                        $blog->created_at ->format('d M Y') }}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

        </div>
    </section>

</div>

<style>
    .blog-img {
        width: 100%;
        height: 250px;
        /* fixed height */
        object-fit: cover;
        /* crop nicely */
        border-radius: 6px;
    }
</style>


@endsection