@extends('layouts.app')
@section('title', 'Duyurular')
@section('page-title', 'Duyurular')

@section('content')
@forelse($announcements as $announcement)
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden mb-4 hover:shadow-md transition-shadow">
        <div class="p-6">
            <div class="flex items-start justify-between gap-4 mb-3">
                <div class="flex items-start gap-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
                    </div>
                    <h2 class="text-base font-semibold text-gray-800 dark:text-gray-100">{{ $announcement->title }}</h2>
                </div>
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 whitespace-nowrap flex-shrink-0">
                    {{ $announcement->published_at?->format('d.m.Y') }}
                </span>
            </div>
            <div class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed ml-13 pl-0.5">{!! nl2br(e($announcement->content)) !!}</div>
        </div>
    </div>
@empty
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-12 text-center">
        <div class="w-16 h-16 bg-gray-50 dark:bg-gray-700 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-gray-300 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
        </div>
        <p class="text-gray-400 dark:text-gray-500 text-sm">Henuz duyuru yok.</p>
    </div>
@endforelse

@if($announcements->hasPages())
    <div class="mt-4">
        {{ $announcements->links() }}
    </div>
@endif
@endsection