@extends("client.layouts.app")
@section("title", __("client.announcements.title"))
@section("content")

<div class="pn-page-header">
    <div>
        <h1 class="pn-page-title">{{ __('client.announcements.page_title') }}</h1>
        <p class="pn-page-subtitle">{{ __('client.announcements.page_subtitle') }}</p>
    </div>
    <a href="{{ route('client.announcements.rss') }}" class="btn btn-outline">{{ __('client.announcements.rss_feed') }}</a>
</div>

<form method="GET" action="{{ route('client.announcements.index') }}" class="flex gap-8" role="search" style="flex-wrap:wrap;align-items:center;margin-bottom:12px;">
    @if($category)<input type="hidden" name="category" value="{{ $category }}">@endif
    <input type="search" name="q" value="{{ $q }}" placeholder="{{ __('client.list.search_announcements') }}" aria-label="{{ __('client.list.search_announcements') }}" class="form-control" style="max-width:360px;" maxlength="100">
    <button type="submit" class="btn btn-outline">{{ __('common.actions.search') }}</button>
    @if($q !== '')<a href="{{ route('client.announcements.index', array_filter(['category' => $category])) }}" class="link">{{ __('common.actions.reset') }}</a>@endif
</form>

@if(count($categories ?? []) > 1)
<nav class="flex gap-8" style="flex-wrap:wrap;margin-bottom:12px;" aria-label="{{ __('admin.announcements.category') }}">
    <a href="{{ route('client.announcements.index', array_filter(['q' => $q])) }}" class="btn btn-sm {{ $category ? 'btn-outline' : 'btn-primary' }}">{{ __('client.announcements.all_categories') }}</a>
    @foreach($categories as $c)
    <a href="{{ route('client.announcements.index', array_filter(['category' => $c, 'q' => $q])) }}" class="btn btn-sm {{ $category === $c ? 'btn-primary' : 'btn-outline' }}">{{ $c }}</a>
    @endforeach
</nav>
@endif

@if($announcements->isEmpty())
<div class="pn-card">
    <div class="pn-empty">
        <div class="pn-empty-icon">&#128227;</div>
        <p>{{ $q !== '' ? __('client.list.no_matches') : __('client.announcements.no_announcements') }}</p>
    </div>
</div>
@else
<div style="display:flex;flex-direction:column;gap:12px">
    @foreach($announcements as $announcement)
    <a href="{{ route("client.announcements.show", $announcement) }}" style="text-decoration:none;color:inherit">
        <div class="pn-card" style="padding:20px 24px;transition:all 0.2s;display:flex;align-items:flex-start;gap:18px">
            <div style="width:44px;height:44px;background:var(--primary-light);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                <svg width="20" height="20" fill="none" stroke="var(--primary)" 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>
            <div style="flex:1;min-width:0">
                @if($announcement->category)<div style="font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px">{{ $announcement->category }}</div>@endif
                <div style="font-size:14.5px;font-weight:700;color:var(--primary);margin-bottom:5px">{{ $announcement->title }}</div>
                <div style="font-size:13px;color:var(--muted);line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical">
                    {{ strip_tags($announcement->announcement) }}
                </div>
            </div>
            <time style="font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0;margin-top:2px">{{ $announcement->created_at->format(date_fmt()) }}</time>
        </div>
    </a>
    @endforeach
</div>
<div class="mt-16">{{ $announcements->links() }}</div>
@endif

@endsection