@extends('layouts.public')

@section('title', $event->title.' — '.setting('university_name'))
@section('description', $event->excerpt)

@section('content')

    <article class="container-prose py-14">
        <x-breadcrumb :items="[
            ['label' => 'Home', 'url' => route('home')],
            ['label' => 'Events', 'url' => route('events.index')],
            ['label' => Str::limit($event->title, 40)],
        ]" />

        <header class="mt-6">
            @if ($event->isUpcoming())
                <x-badge color="emerald" size="sm">Upcoming</x-badge>
            @else
                <x-badge color="slate" size="sm">Past event</x-badge>
            @endif

            <h1 class="mt-4 font-display text-4xl leading-tight tracking-tight text-slate-900 sm:text-5xl">
                {{ $event->title }}
            </h1>

            <dl class="mt-8 grid gap-5 rounded-xl border border-slate-200 bg-canvas p-6 sm:grid-cols-2">
                <div>
                    <dt class="text-xs uppercase tracking-wider text-slate-500">Date</dt>
                    <dd class="mt-1 text-sm font-semibold text-slate-900">{{ $event->dateLabel() }}</dd>
                </div>
                <div>
                    <dt class="text-xs uppercase tracking-wider text-slate-500">Time</dt>
                    <dd class="mt-1 text-sm font-semibold text-slate-900">
                        {{ $event->starts_at->format('g:i A') }}
                        @if ($event->ends_at)&ndash; {{ $event->ends_at->format('g:i A') }}@endif
                    </dd>
                </div>
                @if ($event->location)
                    <div class="sm:col-span-2">
                        <dt class="text-xs uppercase tracking-wider text-slate-500">Location</dt>
                        <dd class="mt-1 text-sm font-semibold text-slate-900">{{ $event->location }}</dd>
                    </div>
                @endif
            </dl>
        </header>

        @if ($event->description)
            <div class="prose-kcu mt-10">{!! $event->description !!}</div>
        @endif
    </article>

    @if ($upcoming->isNotEmpty())
        <section class="bg-canvas py-14">
            <div class="container-page">
                <h2 class="font-display text-3xl tracking-tight text-slate-900">Other upcoming events</h2>

                <ul class="mt-8 grid gap-4 md:grid-cols-3">
                    @foreach ($upcoming as $item)
                        <li>
                            <a href="{{ route('events.show', $item) }}"
                               class="block h-full rounded-xl border border-slate-200 bg-white p-5 transition hover:border-brand-300 hover:shadow-md">
                                <time datetime="{{ $item->starts_at->toDateString() }}" class="text-xs text-slate-500">
                                    {{ $item->dateLabel() }}
                                </time>
                                <h3 class="mt-2 text-sm font-semibold text-slate-900">{{ $item->title }}</h3>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </section>
    @endif

@endsection
