@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 d-flex mb-3">
        @foreach ($e_categories as $ec)
        <a class="btn btn-outline-primary rounded-pill  @if ($pelatihancategory->id == $ec->id) active @endif"
            style="border: 1px solid var(--bs-primary); width: fit-content"
            href="{{ route('pelatihan.byCategory', $ec->id) }}">
            {{ $ec->nama }}
        </a>
        @endforeach
    </div>
    <div class="row">
        @if (count($pelatihans) > 0)
        @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
        @else
        @push('scripts')
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
        @endpush
        <lottie-player src="https://assets2.lottiefiles.com/packages/lf20_dmw3t0vg.json" background="transparent"
            speed="1" style="width: 100%; height: 100%;" loop autoplay></lottie-player>
        @endif
    </div>
</div>
@endsection