@extends('layouts.public')

@section('title', $school->name.' — '.setting('university_name'))
@section('description', $school->description)

@section('content')

    <section class="bg-brand-900 text-white">
        <div class="container-page py-14">
            <nav aria-label="Breadcrumb" class="text-sm">
                <ol class="flex flex-wrap items-center gap-1.5 text-slate-400">
                    <li><a href="{{ route('home') }}" class="hover:text-gold-300">Home</a></li>
                    <li aria-hidden="true">/</li>
                    <li><a href="{{ route('schools.index') }}" class="hover:text-gold-300">Academics</a></li>
                    <li aria-hidden="true">/</li>
                    <li class="text-white" aria-current="page">{{ $school->name }}</li>
                </ol>
            </nav>

            <h1 class="mt-6 max-w-4xl font-display text-4xl leading-tight tracking-tight sm:text-5xl">
                {{ $school->name }}
            </h1>
            <p class="mt-4 max-w-3xl text-lg text-slate-300">{{ $school->description }}</p>
        </div>
    </section>

    <div class="container-page py-14">
        <div class="grid gap-12 lg:grid-cols-3">
            <div class="lg:col-span-2">
                @if ($school->overview)
                    <h2 class="font-display text-3xl tracking-tight text-slate-900">About the school</h2>
                    <div class="prose-kcu mt-4">{!! nl2br(e($school->overview)) !!}</div>
                @endif

                <h2 class="mt-12 font-display text-3xl tracking-tight text-slate-900">Programmes</h2>

                @if ($school->programmes->isEmpty())
                    <x-empty-state class="mt-6" title="No programmes published yet" />
                @else
                    <ul class="mt-6 space-y-4">
                        @foreach ($school->programmes as $programme)
                            <li>
                                <a href="{{ route('programmes.show', $programme) }}"
                                   class="flex flex-col gap-3 rounded-xl border border-slate-200 bg-white p-5 transition hover:border-brand-300 hover:shadow-md sm:flex-row sm:items-center sm:justify-between">
                                    <div class="min-w-0">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <x-badge color="gold" size="sm">{{ $programme->levelLabel() }}</x-badge>
                                            <span class="font-mono text-[11px] text-slate-400">{{ $programme->code }}</span>
                                        </div>
                                        <h3 class="mt-2 text-base font-semibold text-slate-900">{{ $programme->name }}</h3>
                                        <p class="mt-1 text-sm text-slate-500">
                                            {{ $programme->durationLabel() }} &middot; {{ $programme->studyModeLabel() }} &middot; {{ $programme->campusLabel() }}
                                        </p>
                                    </div>

                                    <svg class="hidden h-5 w-5 shrink-0 text-slate-300 sm:block" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M7.3 14.7a1 1 0 0 1 0-1.4L10.6 10 7.3 6.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4 0Z" clip-rule="evenodd"/>
                                    </svg>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>

            <aside class="space-y-6 lg:sticky lg:top-28 lg:self-start">
                @if ($school->departments->isNotEmpty())
                    <x-card>
                        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-900">Departments</h2>
                        <ul class="mt-4 space-y-2 text-sm text-slate-600">
                            @foreach ($school->departments as $department)
                                <li class="flex gap-2">
                                    <span class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-gold-400"></span>
                                    {{ $department->name }}
                                </li>
                            @endforeach
                        </ul>
                    </x-card>
                @endif

                <x-card class="border-brand-200 bg-brand-50">
                    <h2 class="text-base font-semibold text-slate-900">Ready to apply?</h2>
                    <p class="mt-2 text-sm text-slate-600">Start your application online and track it through to a decision.</p>
                    <x-button :href="route('apply')" class="mt-5 w-full">Apply Now</x-button>
                </x-card>
            </aside>
        </div>
    </div>

@endsection
