@php
    $heading = $heading ?? __('app.portal.notices.title');
    $description = $description ?? __('app.portal.notices.desc');
@endphp

<div class="mx-auto max-w-5xl space-y-6">
    <div>
        <h1 class="text-xl font-bold text-ink dark:text-slate-100">{{ $heading }}</h1>
        <p class="mt-1 text-sm text-muted dark:text-slate-400">{{ $description }}</p>
    </div>

    @if ($records->isEmpty())
        <x-card>
            <x-empty-state icon="bell" :title="__('app.portal.notices.empty')" :description="__('app.portal.notices.empty_desc')" />
        </x-card>
    @else
        <div class="space-y-4">
            @foreach ($records as $record)
                <x-card wire:key="notice-{{ $record->id }}">
                    <div class="flex flex-wrap items-start justify-between gap-3">
                        <div class="min-w-0">
                            <div class="mb-2 flex flex-wrap items-center gap-1.5">
                                <x-badge :color="$record->type->value === 'announcement' ? 'gold' : 'maroon'">
                                    {{ $record->type->label() }}
                                </x-badge>
                                <x-badge color="slate">{{ $record->audience->label() }}</x-badge>
                                @if ($record->academicClass)
                                    <x-badge color="slate">
                                        {{ $record->academicClass->localizedName() }}
                                        @if ($record->section)
                                            · {{ $record->section->localizedName() }}
                                        @endif
                                    </x-badge>
                                @endif
                            </div>
                            <h2 class="text-base font-bold text-ink dark:text-slate-100">{{ $record->localizedTitle() }}</h2>
                            <p class="mt-1 text-xs text-muted dark:text-slate-400">
                                {{ __('app.portal.notices.published_at') }}: {{ $record->published_at?->translatedFormat('d M Y, H:i') }}
                                @if ($record->expires_at)
                                    · {{ __('app.portal.notices.expires_on') }}: {{ $record->expires_at->translatedFormat('d M Y') }}
                                @endif
                            </p>
                            <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
                                {{ \Illuminate\Support\Str::limit(strip_tags($record->localizedBody()), 260) }}
                            </p>
                        </div>
                        <div class="flex shrink-0 flex-col items-end gap-2">
                            <x-link-button :href="route('portal.notices.show', $record)" variant="secondary" class="px-3 py-2 text-xs">
                                {{ __('app.portal.common.read_more') }}
                            </x-link-button>
                            @if ($record->hasAttachment())
                                <a href="{{ route('portal.notices.attachment', $record) }}"
                                   class="inline-flex items-center gap-1 text-[11px] font-semibold text-maroon hover:underline dark:text-gold-light">
                                    <x-icon name="download" class="h-3 w-3" />
                                    {{ __('app.portal.common.attachment') }}
                                </a>
                            @endif
                        </div>
                    </div>
                </x-card>
            @endforeach
        </div>

        <div>{{ $records->links() }}</div>
    @endif
</div>