@extends('layouts.layouts')

@section('content')
<section style="margin-top:100px" class="py-5">
    <div class="container">

        {{-- Judul --}}
        <h3 class="fw-bold mb-4 text-center">
            {{ $ekskul->nama }}
        </h3>

        <div class="row align-items-center">

            {{-- Gambar --}}
            <div class="col-md-6 mb-3">
                @if($ekskul->gambar)
                    <img src="{{ asset('storage/'.$ekskul->gambar) }}"
                         class="img-fluid rounded shadow"
                         alt="{{ $ekskul->nama }}">
                @else
                    <img src="{{ asset('assets/images/no-image.png') }}"
                         class="img-fluid rounded shadow"
                         alt="No Image">
                @endif
            </div>

            {{-- Deskripsi --}}
            <div class="col-md-6">
                <p class="fs-6 text-muted">
                    {{ $ekskul->deskripsi }}
                </p>

                <a href="{{ url('/ekstrakurikuler') }}" class="btn btn-outline-danger mt-3">
                    ← Kembali ke Ekstrakurikuler
                </a>
            </div>

        </div>

    </div>
</section>
@endsection