@extends('layouts.layouts')

@section('content')
<section id="ekskul" style="margin-top: 100px" class="py-5" data-aos="zoom-in-up">
    <div class="container">

        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-5">
            <div class="d-flex align-items-center">
                <div class="stripe-putih me-2"></div>
                <h5 class="fw-bold text-white">Ekstrakurikuler</h5>
            </div>
        </div>

        {{-- List Ekskul --}}
        <div class="row">
            @foreach ($ekskul as $item)
                <div class="col-md-3 mb-4">
                    <div class="card h-100 shadow-sm">

                        {{-- Gambar --}}
                        @if($item->gambar)
                            <img src="{{ asset('storage/'.$item->gambar) }}"
                                 class="card-img-top"
                                 alt="{{ $item->nama }}">
                        @else
                            <img src="{{ asset('assets/images/no-image.png') }}"
                                 class="card-img-top"
                                 alt="No Image">
                        @endif

                        {{-- Body --}}
                        <div class="card-body text-center">
                            <h6 class="fw-bold">{{ $item->nama }}</h6>

                            <a href="{{ route('ekskul.detail', $item->id) }}"
                               class="btn btn-sm btn-outline-danger mt-2">
                                Detail
                            </a>
                        </div>

                    </div>
                </div>
            @endforeach
        </div>

    </div>
</section>
@endsection