<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <title>@yield('code') — {{ setting('university_name', 'King Ceasor University') }}</title>
    <link rel="icon" href="{{ asset('favicon.ico') }}" sizes="any">
    @vite(['resources/css/app.css'])
</head>
<body class="flex min-h-full flex-col bg-canvas">

<main class="flex flex-1 items-center justify-center px-5 py-16">
    <div class="w-full max-w-lg text-center">

        <a href="{{ url('/') }}" class="mb-10 inline-block">
            <img src="{{ asset('images/kcu-logo.png') }}"
                 alt="{{ setting('university_name', 'King Ceasor University') }}"
                 class="mx-auto h-12 w-auto" width="900" height="338">
        </a>

        <p class="font-display text-7xl text-brand-700">@yield('code')</p>

        <h1 class="mt-4 text-2xl font-semibold text-slate-900">@yield('title')</h1>

        <p class="mt-3 leading-relaxed text-slate-600">@yield('message')</p>

        <div class="mt-9 flex flex-col justify-center gap-3 sm:flex-row">
            <a href="{{ url('/') }}"
               class="inline-flex items-center justify-center rounded-lg bg-brand-700 px-6 py-3 text-sm font-medium text-white shadow-sm transition hover:bg-brand-800">
                Back to the website
            </a>

            @yield('actions')
        </div>

        <p class="mt-10 text-xs text-slate-500">
            Need help?
            <a href="mailto:{{ setting('university_email', 'info@kcu.ac.ug') }}" class="text-brand-700 hover:underline">
                {{ setting('university_email', 'info@kcu.ac.ug') }}
            </a>
            &middot; {{ setting('university_phone', '+256 200 911 450') }}
        </p>
    </div>
</main>

</body>
</html>
