@extends('layouts.app')
@section('title', 'Ekstrakurikuler – SD Negeri 4 Keling')

@section('content')

{{-- Page Hero --}}
<div class="sd-page-hero" style="background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.30),rgba(0,0,0,.05)), url('{{ (isset($heroImages['ekstrakurikuler']) ? $heroImages['ekstrakurikuler']->url : asset('images/buatekstra.jpeg')) }}');background-size:cover;background-position:center;">
  <div class="sd-page-hero-inner">
    <p class="sd-page-breadcrumb">
      <a href="{{ route('home') }}">Beranda</a> &nbsp;/&nbsp;
      <a href="#">Informasi</a> &nbsp;/&nbsp;
      <span>Ekstrakurikuler</span>
    </p>
    <h1 class="sd-page-title">Ekstrakurikuler</h1>
    <p class="sd-page-subtitle">Wadah pengembangan bakat dan minat siswa di luar jam pelajaran</p>
    <div class="sd-page-accent"></div>
  </div>
</div>

{{-- Content --}}
<div class="sd-page-body">

  <div class="sd-ekskul-grid sd-reveal">
    @forelse($ekskul as $e)
    <div class="sd-ekskul-card warna-{{ $e->warna }}">
      <div class="sd-ekskul-img-wrap">
        @if($e->gambar)
        <img src="{{ str_starts_with($e->gambar,'http') ? $e->gambar : asset($e->gambar) }}" alt="{{ $e->nama }}">
        @else
        <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center">
          <i class="bi bi-image" style="font-size:2rem;color:var(--biru);opacity:.3"></i>
        </div>
        @endif
      </div>
      <div class="sd-ekskul-body">
        <p class="sd-ekskul-nama">{{ $e->nama }}</p>
        <p class="sd-ekskul-desc">{{ $e->deskripsi }}</p>
        <div class="sd-ekskul-meta">
          <div class="sd-ekskul-meta-row">
            <i class="bi bi-clock-fill"></i>
            <span>{{ $e->jadwal }}</span>
          </div>
          <div class="sd-ekskul-meta-row">
            <i class="bi bi-person-fill"></i>
            <span>Pembina: {{ $e->pembina }}</span>
          </div>
        </div>
      </div>
    </div>
    @empty
    <p style="color:var(--teks-abu)">Belum ada data ekstrakurikuler.</p>
    @endforelse
  </div>

</div>

@endsection