@extends('pwa.template.app.main')
@section('script')
  <script>
    $(document).ready(function() {
      $(".owl-carousel").owlCarousel({
        autoWidth: true,
        margin: 8,
        dots: false,
      });
    });
  </script>
@endsection
@section('head')
  <style>
    .owl-stage {
      display: flex;
    }
  </style>
@endsection
@section('app-content')
  <div class="container pt-4">
    <div class="owl-carousel mb-3">
      @foreach ($e_categories as $ec)
        <a class="btn btn-outline-primary rounded-pill" style="border: 1px solid var(--bs-primary); width: fit-content"
          href="{{ route('pelatihan.byCategory', $ec->id) }}">
          {{ $ec->nama }}
        </a>
      @endforeach
    </div>
    <div class="row">
      @foreach ($pelatihans as $e)
        <div class="col-12 mb-3">
          <div class="card py-2">
            <div class="card-header bg-white border-0">
                  <img class="mb-2" src="{{ asset('storage/' . $e->file) }}" alt=""
                    style="object-fit: cover; border-radius: 3px; width: 100%;" />
            </div>
            <div class="card-body py-0">
              <h4 class="mb-1">{{ $e->judul }}</h4>
              <span class="badge text-bg-primary mb-2">{{ $e->kategori }}</span>
              <p> {!! substr($e->deskripsi, 0, 50) . '...' !!}</p>
            </div>
            <div class="card-footer d-flex justify-content-end bg-white">
              <a class="btn btn-primary btn-sm" href="{{ route('pelatihan.detail', $e->id) }}">
                Lihat
              </a>
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </div>
@endsection