@extends('layouts.landing.index')
@vite([
  // 'resources/less/home.less',
  // 'resources/js/test.js'
])
@section('content')
<!-- Navigation Bar -->
@include('layouts.landing.nav')

<!-- Content -->
<div id="practice-details" class="mt-2">
  <div class="container-xl">
    <x-landing-breadcrumbs :breadcrumbs="$breadcrumbs"></x-landing-breadcrumbs>
    <h1 class="mb-2 mt-2">{{ $news->title }}</h1>
    <span class="d-block mb-5">
      <i class="far fa-calendar-check"></i> {{ date('F d, Y',strtotime($news->published_at)) }} | {{ $keyword }} | {{ $news->institution ? 'By: '.$news->institution->name : 'Admin Sekertariat SDGs' }}
    </span>
    <div class="row d-flex justify-content-center">
      <div class="col-12">
        <img src="{{ asset('storage/action-news/'.$news->image) }}" class="d-block w-100 rounded-5 object-fit-cover" style="height: 600px" alt="{{ $news->image }}">
      </div>
    </div>

    <div class="my-5">{!! $news->content !!}</div>
    <hr />
  </div>
</div>
<div id="news" class="bg-white pb-5">
  <div class="container-xl">
    <h2 class="mt-5 mb-4">Berita Aksi Lainnya</h2>
      <div class="row g-5">
        @foreach ($actionNews as $d)
          <div class="col-12 col-sm-6 col-md-6 col-lg-4">
            <div class="card border-0 p-2 bg-transparent">
              <a href="{{ route('news.detail', [$d->id]) }}" class="text-decoration-none"><img src="{{ asset('storage/action-news/'.$d->image) }}" class="img-thumb-card rounded-4" /></a>
              <div class="card-body p-0 mt-2">
                <a href="{{ route('news.detail', [$d->id]) }}" class="text-decoration-none"><h5 class="card-title">{{ $d->title }}</h5></a>
                <span class="date">{{ date('F d, Y',strtotime($d->published_at)) }}</span>
                <p class="card-text mt-2">{!! substr($d->description, 0, 95)."..." !!}</p>
                <a href="{{ route('news.detail', [$d->id]) }}" class="read">Baca selengkapnya</a>
              </div>
            </div>
          </div>
        @endforeach
      </div>
      <div class="d-flex justify-content-center align-items-center mt-5">
        <div>
          <a href="{{ route('news') }}" class="btn btn-primary rounded-pill py-2 px-5">Lihat Lebih Banyak</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Footer -->
@include('layouts.landing.footer')
@endsection