@use('App\Modules\CMS\Models\CmsAnnouncement')
<x-layouts.admin title="Website content">
    @include('admin.cms._tabs')

    <div class="mb-4 flex justify-end"><x-ui.button :href="route('admin.cms.announcements.create')">New announcement</x-ui.button></div>

    <div class="overflow-x-auto rounded-xl border border-slate-200 bg-white">
        <table class="min-w-full divide-y divide-slate-100 text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
                <tr>
                    <th scope="col" class="px-4 py-3">Announcement</th>
                    <th scope="col" class="px-4 py-3">Shown to</th>
                    <th scope="col" class="px-4 py-3">Window (UTC)</th>
                    <th scope="col" class="px-4 py-3">Status</th>
                    <th scope="col" class="px-4 py-3"><span class="sr-only">Actions</span></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($announcements as $announcement)
                    <tr>
                        <td class="px-4 py-3 font-medium text-slate-800">{{ $announcement->title }}</td>
                        <td class="px-4 py-3 text-slate-500">{{ CmsAnnouncement::AUDIENCES[$announcement->audience] ?? $announcement->audience }}</td>
                        <td class="px-4 py-3 text-slate-500">
                            {{ $announcement->starts_at?->format('Y-m-d H:i') ?? 'Now' }} → {{ $announcement->ends_at?->format('Y-m-d H:i') ?? 'No end' }}
                        </td>
                        <td class="px-4 py-3"><x-ui.badge :color="$announcement->status === 'published' ? 'green' : 'slate'">{{ ucfirst($announcement->status) }}</x-ui.badge></td>
                        <td class="px-4 py-3 text-right"><a href="{{ route('admin.cms.announcements.edit', $announcement) }}" class="font-medium text-rose-700 hover:underline">Edit</a></td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">No announcements.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</x-layouts.admin>