@extends('student.layouts.app')
@push("styles")
<style>
    .card-img-top {
        height: 10vw;
        object-fit: cover;
    }

    .card {
        width: 100%;
    }

    @media only screen and (max-width: 767px) {
        .card-img-top {
            height: 25vw;
            object-fit: cover;
        }
    }

    @media only screen and (max-width: 575px) {
        .card-img-top {
            height: 45vw;
            object-fit: cover;
        }
    }
</style>
@endpush
@section('titlePage', 'Blogs')
@section('content')

<div class="left-content">
    <h5 class="breadcrumb-item active">STUDENT BLOGS</h5>
</div>
<div class="row">
    <div class="col-12">
        @include('common.alert')
        <div class="card">
            <div class="card-body">
                <div class="row">
                    @foreach ($data as $item)
                    <div class="col-xl-4 col-md-12">
                        <div class="card pricing-card">
                            <div>
                               {{-- <img class="card-img-top" style="height:200px;" src="{{asset($item['image_url'])}}" alt="{{$item->title}}"> --}}
                            </div>
                            <div class="card-body">
                                <ul class="list-unstyled mb-4">
                                    <li class="mb-3 tx-14 tx-primary"><span><i class="fa fa-check me-2 tx-10"></i></span>{{$item->title}}</li>
                                    <li class="mb-3 tx-14 tx-primary"><span><i class="fa fa-check me-2 tx-10"></i></span>Category: {{$item->category}}</li>
                                </ul>
                                <div class="tx-center">
                                    <a href="{{_route('student.blogs.detail', $item->id)}}" class="btn btn-primary-light btn-block">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection