@extends('layouts.public')
@section('title', $level->name)

@section('content')
@include('partials.page-header', ['title' => $level->name])

<section class="section">
    <div class="container">
        <div class="row g-5 align-items-start">
            <div class="col-lg-7">
                @if($level->image)
                    <img src="{{ image_url($level->image) }}" class="img-fluid rounded-4 mb-4" alt="{{ $level->name }}">
                @endif
                <h3 class="fw-bold mb-3">{{ $level->name }}</h3>
                <div class="text-muted" style="line-height:1.8;">
                    {!! $level->description !!}
                </div>
            </div>
            <div class="col-lg-5">
                <div class="card card-hover shadow-sm">
                    <div class="card-body p-4">
                        <h6 class="fw-bold mb-3">Otros niveles</h6>
                        @forelse($others as $other)
                            <a href="{{ route('levels.show', $other->slug) }}" class="d-flex align-items-center gap-3 mb-3 text-decoration-none">
                                <div class="icon-circle bg-primary bg-opacity-10 text-primary" style="width:48px;height:48px;font-size:1.3rem;">
                                    <i class="bi {{ $other->icon ?: 'bi-mortarboard' }}"></i>
                                </div>
                                <div class="text-dark fw-semibold">{{ $other->name }}</div>
                            </a>
                        @empty
                            <p class="text-muted small mb-0">No hay otros niveles.</p>
                        @endforelse
                        <a href="{{ route('admissions.index') }}" class="btn btn-admission w-100 mt-3">Solicitar Admision</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
