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

<!-- Content -->
<div id="actors" class="pt-4 pb-5 bg-white">
  <div class="container">
    <x-landing-breadcrumbs :breadcrumbs="$breadcrumbs"></x-landing-breadcrumbs>
    <h1 class="text-center fw-700">Direktori Aktor Pembangunan</h1>
    <div class="d-flex align-items-center justify-content-center flex-column mt-4">
      <div class="w-50">
        <form action="{{ route('kmp') }}" method="get">
          {{ csrf_field() }}
          <div class="input-group input-group-lg">
            <span class="input-group-text rounded-start-pill" id="basic-addon1">
              <i class="fa fa-search"></i>
            </span>
            <input name="s" value="{{ $q }}" type="text" class="form-control rounded-end-pill bg-transparent" placeholder="Cari disini...">
          </div>
        </form>
      </div>
      <div class="w-75">
        <p class="subtitle my-4 text-center">
          Profil aktor pembangunan dari unsur pemerintah dan non pemerintah yang mendukung pencapaian TPB/SDG
        </p>
      </div>
    </div>
    <div class="row g-5 mt-2">
      @foreach ($data->items() as $d)
        <div class="col-12">
          <div class="row border-bottom border-2 pb-4">
            <div class="col-12 mb-4">
              <a href="{{ route('actor-directory.detail', [$d->id]) }}" class="text-decoration-none text-dark"><h3 class="fw-600">{{ $d->name }}</h3></a>
            </div>
            <div class="col-12 col-sm-6 col-md-3">
              <a href="{{ route('actor-directory.detail', [$d->id]) }}"><img loading="lazy" src="{{ $d->logo ? asset('storage/institution/'.$d->logo) : asset('assets/images/Logo-Default-SDGs.png') }}" width="100%" style="max-width: 150px" class="img-fluid rounded-3" /></a>
              <a href="{{ route('actor-directory.detail', [$d->id]) }}" class="text-decoration-none"><h6 class="text-grey fw-light mt-3">{{ $d->actor_element_type ? $d->actor_element_type->name : '' }}</h6></a>
              <h6 class="text-grey fw-light mt-2">{{ date_format(date_create($d->created_at), 'F d, Y') }}</h6>
            </div>
            <div class="col-12 col-sm-6 col-md-9">
              <p class="description">{{ substr($d->short_description, 0, 300)."..." }}</p>
              <a href="{{ route('actor-directory.detail', [$d->id]) }}" class="btn btn-primary rounded-pill py-2 px-5 mt-3">Lihat Profil Lengkap</a>
            </div>
          </div>
        </div>
      @endforeach
      {{ $data->links() }}
    </div>
  </div>
</div>

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