@extends('layouts.public')

@section('title', 'Academics — '.setting('university_name'))
@section('description', 'Explore the schools, departments and programmes of King Ceasor University.')

@section('content')

    <section class="border-b border-slate-200 bg-canvas">
        <div class="container-page py-12">
            <x-breadcrumb :items="[['label' => 'Home', 'url' => route('home')], ['label' => 'Academics']]" />
            <h1 class="mt-4 font-display text-4xl tracking-tight text-slate-900 sm:text-5xl">Academics</h1>
            <p class="mt-3 max-w-2xl text-lg text-slate-600">
                Three schools, united by a commitment to {{ strtolower(setting('university_motto_meaning')) }} —
                and to graduates who can practise from the day they leave.
            </p>
        </div>
    </section>

    <div class="container-page space-y-16 py-14">
        @foreach ($schools as $school)
            <section aria-labelledby="school-{{ $school->id }}">
                <div class="flex flex-col justify-between gap-4 border-b border-slate-200 pb-6 sm:flex-row sm:items-end">
                    <div>
                        <span class="font-display text-4xl text-slate-200">
                            {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}
                        </span>
                        <h2 id="school-{{ $school->id }}" class="mt-2 font-display text-3xl tracking-tight text-slate-900">
                            {{ $school->name }}
                        </h2>
                        <p class="mt-2 max-w-2xl text-slate-600">{{ $school->description }}</p>
                    </div>

                    <x-button :href="route('schools.show', $school)" variant="outline" class="shrink-0">
                        About this school
                    </x-button>
                </div>

                @if ($school->programmes->isEmpty())
                    <p class="mt-6 text-sm text-slate-500">Programmes for this school are being published.</p>
                @else
                    <ul class="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                        @foreach ($school->programmes as $programme)
                            <li>
                                <a href="{{ route('programmes.show', $programme) }}"
                                   class="flex h-full flex-col rounded-xl border border-slate-200 bg-white p-5 transition hover:border-brand-300 hover:shadow-md">
                                    <x-badge color="gold" size="sm" class="self-start">{{ $programme->levelLabel() }}</x-badge>
                                    <h3 class="mt-3 text-base font-semibold leading-snug text-slate-900">{{ $programme->name }}</h3>
                                    <p class="mt-auto pt-3 text-xs text-slate-500">
                                        {{ $programme->durationLabel() }} &middot; {{ $programme->studyModeLabel() }}
                                    </p>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </section>
        @endforeach
    </div>

@endsection
