@extends('layouts.app')

@section('content')
    <div class="inner-banner-three text-left text-white mb-200 sm-mb-50">
        <div class="bg-wrapper position-relative text-left">
            <div class="plam-tree-two"><img src="/images/media/Palm tree-02.png" /></div>

            <div class="container">
                <div class="recipes text-center">
                    <h2 class="text-white text-uppercase">
                        {!! nl2br(e($page->banner_title)) !!}
                    </h2>
                </div>
            </div>
            <div class="container pt-150  sm-pt-50">
                <div class="row gx-xl-5">
                    <div class="col-lg-8">
                        <div class="blog-meta-wrapper pe-xxl-5">
                            <div class="row">
                                @foreach ($recipes as $recipe)
                                    <div class="col-md-6">
                                        <article class="blog-meta-three mb-60 lg-mb-40 wow fadeInUp"
                                            style="visibility: visible; animation-name: fadeInUp; position: relative; height:520px;">
                                            <figure class="post-img m0">
                                                <a href="{{ route('recipe', ['slug' => $recipe->slug]) }}"
                                                    class="w-100 d-block">
                                                    <img src="{{ Voyager::image($recipe->image) }}"
                                                        class="lazy-img w-100 tran4s">
                                                </a>
                                            </figure>
                                            <div class="post-data mt-30">
                                                <div class="post-date text-uppercase">
                                                    {{ Carbon\Carbon::parse($recipe->published_at)->format('d M, Y') }}
                                                </div>
                                                <a href="{{ route('recipe', ['slug' => $recipe->slug]) }}"
                                                    class="mt-10 mb-15">
                                                    <h4 class="tran3s blog-title fw-normal tx-dark">{{ $recipe->title }}
                                                    </h4>
                                                </a>
                                                <div><a href="{{ route('recipe', ['slug' => $recipe->slug]) }}"
                                                        class="blog-btn fw-500 tran3s"
                                                        style="position: absolute;
                                                        bottom: 20px;">Learn
                                                        the
                                                        Recipe</a></div>
                                            </div>
                                        </article> <!-- /.blog-meta-three -->
                                    </div>
                                @endforeach
                            </div>
                        </div> <!-- /.blog-meta-wrapper -->
                        @if ($recipes->lastPage() > 1)
                            <div class="page-pagination-one pt-30">
                                <ul class="d-flex align-items-center style-none">
                                    @for ($i = 1; $i <= $recipes->lastPage(); $i++)
                                        <li class="{{ $i === $recipes->currentPage() ? 'active' : '' }}"><a
                                                href="{{ route('recipes', ['page' => $i]) }}">{{ $i }}</a></li>
                                    @endfor
                                    {{-- <li class="arrow"><a href="#"><i class="bi bi-arrow-right"></i></a></li> --}}
                                </ul>
                            </div>
                        @endif
                    </div>

                    @include("recipes-menu")
                </div>
            </div>
        </div> <!-- /.bg-wrapper -->
    </div>
@endsection