@push('css')
<style>
.news-card {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.news-card .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
}

.news-card .news-title {
    color: #333;
    transition: color 0.2s ease;
    line-height: 1.4;
}

.news-card .news-title:hover {
    color: #667eea;
    cursor: pointer;
}

.news-item {
    transition: background-color 0.2s ease;
    padding: 0.5rem;
    border-radius: 8px;
}

.news-item:hover {
    background-color: #f8f9fa;
}

.news-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 500;
}

.status-published .fa-circle { color: #28a745; }
.status-draft .fa-circle { color: #ffc107; }
.status-archived .fa-circle { color: #6c757d; }

.news-feed {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.news-feed::-webkit-scrollbar {
    width: 4px;
}

.news-feed::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.news-feed::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.news-feed::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.card-footer {
    border-top: 1px solid #eaeaea;
}
</style>
@endpush
@php
    function getNewsTypeColor($type) {
        $colors = [
            'general' => 'secondary',
            'security_alert' => 'danger',
            'market_trend' => 'success',
            'claims_update' => 'info',
            'legal_update' => 'warning',
            'technical_update' => 'primary',
            'guidance' => 'dark',
            'event' => 'purple'
        ];
        return $colors[$type] ?? 'secondary';
    }

    function truncateText($text, $length) {
        if (strlen($text) <= $length) return $text;
        return substr($text, 0, $length) . '...';
    }
@endphp

<div class="card news-card">
        <!-- Card Header with Status Badge -->
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title mb-0">{{ __('labels.latest_news') }}</h4>
            @if(isset($news['count']) && $news['count'])
                <span class="badge bg-white text-primary">
                    {{ $news['count'] ?? '' }} {{ __('labels.news') }}
                </span>
            @endif
        </div>

        <!-- Card Body -->
        <div class="card-body news-feed">
            @forelse($news['list'] as $index => $item)
            <div class="news-item mb-3 pb-3 border-bottom">
                <!-- News Type Badge -->
                <div class="d-flex justify-content-between align-items-start mb-2">
                <span class="badge bg-{{ getNewsTypeColor($item['type']) }}">
                         {{-- {{ ucfirst(str_replace('_', ' ', $item['type'])) }} --}}
                        {{ __('labels.new_types.' . $item['type']) }}
                    </span>
                    <small class="text-muted">
                         {{ date('M d, h:i A', strtotime($item['published_at'])) }}
                    </small>
                </div>
                
                <!-- News Title -->
                <h6 class="news-title fw-bold mb-2">
                    @if($item['is_locked'])
                        <i class="fas fa-lock text-warning me-1"></i>
                    @endif
                    @if($item['is_approved'])
                        <i class="fas fa-check-circle text-success me-1"></i>
                    @endif
                     {{ htmlspecialchars($item['title']) }}
                </h6>
                
                <!-- News Description Preview -->
                <p class="news-description text-muted small mb-2">
                     {{ truncateText(strip_tags($item['description']), 80) }}
                </p>
                
                <!-- Footer Stats -->
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex align-items-center invisible">
                        <!-- View Count -->
                        <span class="me-3 text-muted small">
                            <i class="fas fa-eye me-1"></i>
                             {{ number_format($item['view_count']) }}
                        </span>
                        
                        <!-- Like Count -->
                        <span class="text-muted small">
                            <i class="fas fa-heart text-danger me-1"></i>
                             {{ number_format($item['like_count']) }}
                        </span>
                    </div>
                    
                    <!-- Status Indicator -->
                    {{-- <span class="status-indicator status-{{ $item['status'] ?? '' }}">
                        <i class="fas fa-circle me-1"></i>
                        {{ ucfirst($item['status']) }} 
                    </span> --}}
                </div>
            </div>
            @empty
            <!-- No News Message -->
            <div class="text-center py-4">
                <i class="fas fa-newspaper fa-3x text-muted mb-3"></i>
                <p class="text-muted">{{ __('labels.no_news_available') }}</p>
            </div>
            @endforelse
        </div>

        <!-- Card Footer -->
        <div class="card-footer text-center bg-light">
            @if(auth()->user()->can('create', \App\Models\News::class))
            <a href="{{ route('news.create') }}" target="_blank" class="btn btn-sm btn-primary">
                <i class="fas fa-plus me-1"></i> {{ __('labels.add_new_article') }}
            </a>
            @endif
            <a href="{{ route('news.index') }}" target="_blank" class="btn btn-sm btn-outline-secondary ms-2">
                {{ __('labels.view_all') }} <i class="fas fa-arrow-right ms-1"></i>
            </a>
        </div>
    </div>

@push('js')
<script>
// Add interactivity
document.addEventListener('DOMContentLoaded', function() {
    // Make news items clickable
    document.querySelectorAll('.news-title').forEach(title => {
        title.addEventListener('click', function() {
            // Add your click handler here
            console.log('News clicked:', this.textContent);
        });
    });

    // Auto-refresh news every 30 seconds (optional)
    setInterval(function() {
        // Add your refresh logic here
        console.log('Refreshing news feed...');
    }, 30000);
});
</script>
@endpush