@extends('frontend.layouts.app')

@section('title') {{ $title ?? 'My Favorites' }} @endsection
@section('meta')
<meta property="og:title" content="{{ $og_title }}" />
<meta property="og:description" content="{{ $og_description }}" />
<meta property="og:image" content="{{ getSeoImage($og_image) }}" />
@endsection

@push('style')
@endpush

@section('content')
    <!-- Breadcrumb Section -->
    @include('frontend.layouts.includes.breadcrumb',
    ['links'=>[[$title => route('frontend.favorites') ]]])

    <!-- Favorites Section -->
    <div class="favorites-section pt-2 pb-3 pt-lg-3 pb-lg-5">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0">My Favorites</h4>
            </div>
            @if ($ads->count()==0)
                     <div class="no-favorites">
                <div class="no-favorites-icon">
                    <i class="far fa-heart"></i>
                </div>
                <h4>No favorites yet</h4>
                <p class="text-muted">Items you favorite will appear here</p>
                <a href="{{ url('/') }}" class="btn btn-primary mt-3">Browse Items</a>
            </div>
            @else
       <div class="row g-4">
                   <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3 ">
                        @foreach ($ads as $ad)
                            <div class="col">
                                @include('frontend.ads.fav-list-item')
                            </div>
                        @endforeach
                    </div>
            </div>
            @endif
     

            <!-- Empty State (hidden by default) -->
       

            <!-- Pagination -->
            {{-- <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mt-4">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">Previous</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#">Next</a>
                    </li>
                </ul>
            </nav> --}}
        </div>
    </div>
@endsection

@push('script')
@endpush