@extends('layouts.app')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $portalTitle ?? 'Portal' }} · Avisos</h1>
        <p class="text-sm text-gray-600 dark:text-gray-400">Comunicados recentes da escola e secretaria.</p>
    </div>

    @php($portalPrefix = (auth()->user()->role ?? '') === 'aluno' ? 'portal.aluno.' : 'portal.')
    <div class="flex flex-wrap gap-2">
        <a href="{{ route($portalPrefix . 'boletins') }}" class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Boletins</a>
        <a href="{{ route($portalPrefix . 'frequencia') }}" class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Frequência</a>
        <a href="{{ route($portalPrefix . 'historico') }}" class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700">Histórico</a>
    </div>

    <x-common.component-card title="Comunicados">
        <ul class="space-y-3 text-sm text-gray-600">
            @forelse ($notices as $notice)
                <li class="rounded-lg border border-gray-100 px-4 py-3">
                    <p class="font-medium text-gray-800">{{ $notice->title }}</p>
                    <p class="text-xs text-gray-500">{{ $notice->starts_at?->format('d/m/Y') }}</p>
                    <p class="mt-2 text-sm text-gray-600">{{ $notice->body }}</p>
                </li>
            @empty
                <li class="rounded-lg border border-gray-100 px-4 py-3 text-sm text-gray-500">Nenhum comunicado no momento.</li>
            @endforelse
        </ul>
        <div class="mt-4">
            {{ $notices->links() }}
        </div>
    </x-common.component-card>
</div>
@endsection