@extends('layouts.app')
@section('content')
    <div class="container mt-4">
    <h2 class="mb-2">Opinions</h2>
    <div class="row">
        @foreach ($opinions as $opinion)
            <div class="col-md-4 mb-4">
                <a href="{{ route('opinions.show', $opinion->id) }}" class="text-decoration-none text-dark">
                    <div class="card h-100 shadow-sm">
                        @if ($opinion->image)
                            <img src="{{ asset('storage/' . $opinion->image) }}" class="card-img-top" alt="Opinion Image">
                        @endif
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">{{ $opinion->title }}</h5>
                            <p class="card-text">
                                {{ \Illuminate\Support\Str::limit($opinion->brief_description, 100) }}
                            </p>
                            <span class="btn btn-primary mt-auto">READ MORE</span>
                        </div>
                    </div>
                </a>
            </div>
        @endforeach
    </div>
</div>


        <div class="mt-4">
            {{ $opinions->links() }} <!-- Pagination links -->
        </div>
    </div>
@endsection