@extends('guest.layouts.app')
@section('content')
    <div class="row">
        <div class="col-lg-9">
            <div class="col-12">
                <div class="style-msg primarymsg mb-3">
                    <div class="sb-msg"><i class="bi-question-circle-sign"></i>Dalam <strong>Album Kegiatan</strong></div>
                </div>
            </div>
            <div class="mt-0">
                <div class="row grid-container">
                    @forelse ($data as $res)
                        {{-- <div class="col-lg-6">
                            <div class="card">
                                <div class="card-body">
                                    <img class="card-img-top w-100 h-auto" data-src="holder.js/300x200" alt="Card image cap">
                                    <div class="entry mb-1">
                                        <div class="entry-image mb-2">
                                            <a href="#" data-lightbox="image"
                                               style="background: url('{{ asset('default.jpg') }}') no-repeat center center; background-size: cover; height: 278px;"></a>
                                        </div>
                                        <div class="entry-title">
                                            <h4><a href="#">How To Make More travel By Doing Less</a></h4>
                                        </div>
                                        <div class="entry-content m-0">
                                            <p class="text-muted mb-2" style="font-size: 10pt"></p>
                                        </div>
                                        <div class="entry-meta no-separator nohover">
                                            <ul class="justify-content-between mx-0">
                                                <li><i class="bi-calendar3"></i> 10th Feb 2021</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        <div class="col-md-6 col-lg-4">
                            <div class="card">
                                <a href="{{ route('foto-kegiatan', ['slug' => $res->slug]) }}"><img class="card-img-top w-100 h-auto" src="{{ !empty($res->to_foto_kegiatan_thumbnail->file) ? asset('storage/'.$res->to_foto_kegiatan_thumbnail->file): asset('default.jpg') }}" onerror="this.src='{{ asset('default.jpg') }}'"></a>
                                <div class="card-body">
                                    <div class="entry mb-0">
                                        <div class="entry-title">
                                            <h4><a href="{{ route('foto-kegiatan', ['slug' => $res->slug]) }}">{{ $res->judul }}</a></h4>
                                        </div>
                                        <div class="entry-content m-0">
                                            <p class="text-muted mb-2" style="font-size: 10pt">{{ Str::words($res->deskripsi, 10, '...') }}</p>
                                        </div>
                                        <div class="entry-meta no-separator">
                                            <ul class="justify-content-between mx-0">
                                                <li style="font-size: 10pt"><i class="bi-calendar3"></i> {{ tanggal_indo($res->tanggal_publish) }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                    <span>Belum Ada Data</span>
                    @endforelse
                </div>
            </div>
        </div>
        <div class="col-lg-3 sticky-sidebar-wrap mt-0 mt-lg-0">
            <div class="sticky-sidebar">
                <x-guest.skm></x-guest.skm>
                <x-guest.sosial-media></x-guest.sosial-media>
                <x-guest.kategori></x-guest.kategori>
                <x-guest.link></x-guest.link>
            </div>
        </div>
    </div>
@endsection