@extends('layouts.portal')

@section('title', 'Announcements')

@section('page-header')
    <div class="mb-8">
        <h1 class="font-display text-2xl font-extrabold text-slate-900 sm:text-3xl">School updates</h1>
        <p class="mt-1 text-sm text-slate-500">Announcements for {{ $isParent ? 'parents' : 'students' }}.</p>
    </div>
@endsection

@section('content')
    @if ($announcements->isEmpty())
        <x-portal.empty icon="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.52-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59"
                        message="There are no announcements at the moment."/>
    @else
        <div class="space-y-4">
            @foreach ($announcements as $announcement)
                <article class="group overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm shadow-slate-900/[0.03] transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-900/5">
                    <div class="flex items-start gap-4 p-6">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-accent-500 to-accent-700 text-white shadow-lg shadow-accent-500/25">
                            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.52-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59"/></svg>
                        </span>
                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
                                <h2 class="font-display text-base font-bold text-slate-900">{{ $announcement->title }}</h2>
                                <x-portal.badge tone="{{ $announcement->audience === 'all' ? 'accent' : 'sky' }}">{{ ucfirst($announcement->audience) }}</x-portal.badge>
                            </div>
                            <time class="mt-1 block text-xs font-medium text-slate-400">{{ $announcement->published_at?->format('l, j F Y · g:ia') }}</time>
                            <div class="prose prose-sm mt-3 max-w-none text-sm leading-relaxed text-slate-600">{!! nl2br(e($announcement->body)) !!}</div>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    @endif
@endsection