<div class="space-y-4">
    <!-- Search -->
    <div>
        <x-label for="postSearch" value="{{ __('Search Posts') }}" />
        <x-input id="postSearch" type="text" class="mt-1 block w-full"
                 wire:model.live="postSearch"
                 placeholder="{{ __('Search by title...') }}" />
    </div>

    <!-- Available Posts -->
    <div class="max-h-96 overflow-y-auto">
        @if($availablePosts && $availablePosts->count() > 0)
            <div class="space-y-2">
                @foreach($availablePosts as $post)
                    @php
                        $translation = $post->translations->first();
                        $isSelected = in_array($post->id, $selectedPostIds);
                    @endphp

                    @if($translation)
                        <div class="flex items-start justify-between p-4 border border-gray-200 rounded-lg
                                    {{ $isSelected ? 'bg-theme-surface border-theme-border' : 'bg-white hover:bg-gray-50' }}">
                            <div class="flex-1">
                                <div class="flex items-start space-x-3">
                                    <!-- Checkbox -->
                                    <input type="checkbox"
                                           class="mt-1 rounded border-gray-300 text-theme-brand focus:border-theme-brand focus:ring focus:ring-theme-brand"
                                           wire:change="togglePostSelection({{ $post->id }})"
                                           {{ $isSelected ? 'checked' : '' }}>

                                    <div class="flex-1">
                                        <h4 class="font-medium text-gray-900">{{ $translation->title }}</h4>

                                        @if($translation->excerpt)
                                            <p class="text-sm text-gray-500 mt-1">{{ Str::limit($translation->excerpt, 100) }}</p>
                                        @endif

                                        <div class="flex items-center space-x-4 mt-2 text-xs text-gray-400">
                                            <span>ID: {{ $post->id }}</span>

                                            @if($post->category)
                                                <span>{{ $post->category->translations->first()->name ?? 'Uncategorized' }}</span>
                                            @endif

                                            <span>{{ $post->updated_at->format('M j, Y') }}</span>
                                        </div>

                                        @php
                                            $publishedTranslations = $this->getPublishedTranslationsWithFlags($post);
                                        @endphp

                                        <div class="mt-1 text-xs">
                                            @if($publishedTranslations->count() > 0)
                                                <span class="text-green-600">
                                                    @foreach($publishedTranslations as $pubTranslation)
                                                        <span title="{{ $pubTranslation['locale'] }}">{{ $pubTranslation['flag'] }}</span>
                                                    @endforeach
                                                </span>
                                            @else
                                                <span class="text-yellow-600">Not currently published</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Category Indicator -->
                            @if($post->category)
                                <div class="ml-3 self-start">
                                    @php
                                        $categoryId = $post->category->id;
                                        $categoryName = $post->category->translations->first()->name ?? 'Uncategorized';

                                        // Determine color based on category type
                                        $colorClass = 'bg-gray-100 text-gray-800'; // default
                                        if(in_array($categoryId, [4, 8])) $colorClass = 'bg-theme-surface text-theme-primary'; // news
                                        elseif($categoryId === 5) $colorClass = 'bg-green-100 text-green-800'; // article
                                        elseif(in_array($categoryId, [6, 7])) $colorClass = 'bg-theme-danger-light text-theme-danger-dark'; // event
                                    @endphp

                                    <span class="inline-flex px-2 py-1 text-xs font-medium rounded-full {{ $colorClass }}">
                                        {{ $categoryName }}
                                    </span>
                                </div>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>
        @else
            <div class="text-center py-8">
                <x-icon name="document-text" class="w-12 h-12 mx-auto text-gray-400 mb-4" />
                <p class="text-gray-500 mb-2">
                    @if($postSearch)
                        {{ __('No posts found matching your search.') }}
                    @else
                        {{ __('No published posts available.') }}
                    @endif
                </p>
                @if($postSearch)
                    <p class="text-sm text-gray-400">{{ __('Try a different search term or clear the search to see all posts.') }}</p>
                @endif
            </div>
        @endif
    </div>

    <!-- Selected Count -->
    @if(count($selectedPostIds) > 0)
        <div class="bg-theme-surface border border-theme-border rounded-lg p-3">
            <p class="text-sm text-theme-primary">
                {{ __(':count posts selected', ['count' => count($selectedPostIds)]) }}
            </p>
        </div>
    @endif

</div>